在 ThriveCart Learn+ 課程中添加評論

透過 FastComments，我們可以輕鬆為任何 ThriveCart Learn+ 課程新增即時留言功能。

如果您在設定上遇到任何問題，FastComments 支援也可以提供協助。

請注意，本教學需要一個 FastComments 帳戶。建議您先註冊帳戶，然後再回來此處。您可以在此建立帳戶。

步驟 1：準備課程

由於 ThriveCart Learn+ 的設計，我們必須在每個想要顯示評論的課程頁面上加入 FastComments 代碼。

我們可以在每個頁面使用相同的程式碼片段，系統會自動將不同的留言串綁定到各自的頁面。

首先在編輯器中打開課程，並新增一個 HTML 區塊。

在左側會看到一個 HTML 區塊選項。將其拖放到你想顯示評論的頁面位置。

打開課程並新增 HTML 區塊

現在選取新的 HTML 元素。左側會出現一個區塊，我們可以在那裡貼上程式碼。

現在你已準備好進行步驟 2。

步驟 2：添加自訂代碼

在步驟 2 中，我們需要複製我們的程式碼片段。請確認第 50 行沒有顯示 "demo" - 你需要確保這裡填入的是你的租戶 ID。它應該已經為你自動填好了。

現在讓我們複製 ThriveCart-Learn 專用的 FastComments 程式碼片段。

這段程式碼相當長，因為與 ThriveCart 的整合包含許多功能，所以只需點擊程式碼片段右上角的「複製」按鈕：

ThriveCart Learn+ 留言程式碼

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
    (function () {
        let attemptsRemaining = 10;
        function tryLoad() {
            const simpleSSO = {optedInNotifications: true, optedInSubscriptionNotifications: true};
            let isAuthenticated = false;
            let profileLink = document.querySelector('.thrivecart-courses-header-profile-link');
            if (!profileLink) {
                profileLink = document.querySelector('.thrivecart-courses-header-profile'); // 預覽時的 class 不同。
            }
            // 寬泛的電子郵件輸入欄位選擇器，以防 ThriveCart 更改 id。
            const emailInputField = document.querySelector('input[type=email]');
            if (emailInputField && emailInputField.value) {
                isAuthenticated = true;
                simpleSSO.email = emailInputField.value;
            } else if (profileLink && !profileLink.innerText.includes('John Smith')) { // 讓預覽可以運作 - 沒有可用的電子郵件。
                attemptsRemaining--;
                if (!attemptsRemaining) {
                    return console.error('Could not load FastComments - could not determine user information (email). Please reach out to FastComments support.');
                }
                console.warn('FastComments: No user email found - waiting and trying again.');
                return setTimeout(tryLoad, attemptsRemaining < 5 ? 3000 : 100); // 5 次嘗試後增加等待時間，以防網路緩慢。
            }
            if (profileLink) {
                // 使用原始的 "img" 查詢，以防 ThriveCart 更改圖片 class 選擇器。
                const avatarImg = profileLink.querySelector('img');
                if (avatarImg && avatarImg.src) {
                    isAuthenticated = true;
                    simpleSSO.avatar = avatarImg.src;
                }
                // 使用 innerText，以防 ThriveCart 更改個人資料名稱的顯示方式。
                if (profileLink.innerText) {
                    isAuthenticated = true;
                    simpleSSO.username = profileLink.innerText;
                } else {
                    const bold = profileLink.querySelector('b');
                    if (bold && bold.innerText) {
                        isAuthenticated = true;
                        simpleSSO.username = bold.innerText;
                    }
                }
            } else {
                if (!attemptsRemaining) {
                    return console.error('Could not load FastComments - could not determine user information (user name/avatar). Please reach out to FastComments support.');
                }
                console.warn('FastComments: No user profile info found - waiting and trying again.');
                attemptsRemaining--;
                return setTimeout(tryLoad, attemptsRemaining < 5 ? 3000 : 100); // 5 次嘗試後增加等待時間，以防網路緩慢。
            }
            let url;
            const selectedNavLink = document.querySelector('.tcc-browse-lesson.active a');
            if (selectedNavLink) {
                // 有時 TC 會在同一頁面使用多個連結，所以我們要去除重複。
                url = getPathnameFromUrl(selectedNavLink.href);
            } else {
                // 去除行銷參數與網域名稱
                url = window.location.pathname;
            }
            if (url) {
                url = url.replace('/starte-hier', '');
                url = url.replace('/start-here', '');
            }
            FastCommentsUI(document.getElementById('fastcomments-widget'), {
                tenantId: 'demo',
                urlId: url,
                simpleSSO: isAuthenticated ? simpleSSO : null
            });
        }
        tryLoad();
        function getPathnameFromUrl(url) {
            try {
                const parsedUrl = new URL(url);
                // 去除行銷參數與網域名稱
                return parsedUrl.pathname;
            } catch (error) {
                console.error("Invalid URL", url, error);
                return window.location.pathname; // 預設使用目前路徑，至少有時能正常運作
            }
        }
    })();
</script>

現在將它貼到 ThriveCart 編輯器左側的程式碼區塊中。它應該看起來像這樣：

已新增程式碼

就是這樣！現在我們只需要發佈：

發佈

完成了！現在當你預覽課程時，應該會看到留言框，而且真實使用者將能夠無需登入或再次輸入使用者名稱/電子郵件即可留言。

測試注意事項！

如果你停用了匿名留言功能（預設為停用），你將無法在 Preview 模式下以 John Smith 使用者身分留言。你會收到驗證錯誤，因為預設的 John Smith 使用者沒有電子郵件。如果你想進行測試，我們建議你使用優惠碼，並像真實使用者一樣瀏覽你的網站。

成功

成功！您現在應該可以看到 FastComments 留言小工具。

成功！

恭喜您成功將 FastComments 與 ThriveCart 整合！如果您遇到網域錯誤，或想了解如何自訂留言區，請繼續閱讀！

域名錯誤

您可能會遇到像以下的授權錯誤：

缺少網域設定

通常這是因為您有自己的網域，而不是預設的 "thrivecart.com" 網域。

這是因為 FastComments 不知道它應該允許您的帳戶在此網域上使用。

在這種情況下，修正方法很簡單。您只需將您的網站新增到您的 FastComments.com 帳戶。

前往此處將您的網站新增到您的帳戶。

自訂化

FastComments 的設計可讓您自訂以配合您的網站。

如果您想新增自訂樣式或微調設定，請參閱我們的自訂化文件以了解如何進行。參閱我們的自訂化文件

在您的 ThriveCart Learn+ 課程中添加投票

一旦 FastComments 被加入您的 ThriveCart Learn+ 課程，您也可以在評論中直接執行即時投票。在小工具自訂設定中開啟 Enable Polls，投票按鈕會出現在評論工具列。投票可接受 2 到 10 個選項，結果會即時更新給頁面上的所有人，您可以決定誰能建立投票以及投票是否需要登入。在 ThriveCart Learn+ 上不需要安裝其他任何東西。

試用即時投票示範或閱讀投票說明文件以設定它們。

語言 🇹🇼 繁體中文

ThriveCart Learn+ 安裝

投票