Add Comments to ThriveCart Learn+ Courses

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

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

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

步驟 1：準備課程

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

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

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

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

打開課程並新增 HTML 區塊

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

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

步驟 2：加入自訂程式碼

For Step 2 we have to copy our code snippet. Check that line 50 does not say "demo" - you'll want to ensure this has your tenant id. It should be populated for you.

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

它相當龐大，因為與 ThriveCart 的整合有許多功能，所以只要點擊程式碼片段右上角的 Copy 按鈕：

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 不同。
            }
            // 廣泛的 email 輸入欄選擇器，以防 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>

Now paste it into the code block on the left in the ThriveCart editor. It should look like this:

已新增程式碼

That's it! Now we just have to publish:

發佈

That's it! You should now see the comment box on your course when you preview, and real users will be able to leave comments without signing in or leaving their username/email a second time.

測試注意！

If you have anonymous commenting disabled, which it is by default, you won't be able to leave comments in Preview mode as the John Smith user. You will get an authentication error as the default John Smith user has no email. If you want to test, we suggest you use a coupon code and go through your site like an actual user.

完成

Success! You should now see the FastComments Comment Widget.

成功！

恭喜您已在 ThriveCart 中設定 FastComments！如果您遇到網域錯誤，或想了解如何自訂評論區，請繼續閱讀！

網域錯誤

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

缺少網域設定

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

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

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

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

自訂

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

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

語言 🇹🇼 繁體中文

ThriveCart Learn+ 安裝