Add Comments to ThriveCart Learn+ Courses

由于 ThriveCart Learn+ 的设计，我们必须将 FastComments 代码添加到每个希望显示评论的课程页面。

我们可以在每个页面使用相同的代码片段，单独的评论线程将自动与各个页面关联。

我们首先在编辑器中打开课程并添加一个 HTML 块。

在左侧您应该能看到 HTML 块选项。将其拖到要显示评论的页面位置。

打开课程并添加 HTML 块

现在选择新的 HTML 元素。左侧会出现一个块，我们可以在其中粘贴代码。

现在您已准备好进行第 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 的集成有许多功能，所以只需点击代码片段右上角的复制按钮：

ThriveCart Learn+ 评论代码

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5 (function () {

6 let attemptsRemaining = 10;

7

8 function tryLoad() {

9 const simpleSSO = {optedInNotifications: true, optedInSubscriptionNotifications: true};

10 let isAuthenticated = false;

11 let profileLink = document.querySelector('.thrivecart-courses-header-profile-link');

12 if (!profileLink) {

13 profileLink = document.querySelector('.thrivecart-courses-header-profile'); // class is different for preview.

14 }

15 // 广泛的电子邮件输入字段选择器，以防 ThriveCart 更改 id。

16 const emailInputField = document.querySelector('input[type=email]');

17 if (emailInputField && emailInputField.value) {

18 isAuthenticated = true;

19 simpleSSO.email = emailInputField.value;

20 } else if (profileLink && !profileLink.innerText.includes('John Smith')) { // allow preview to work - no email available.

21 attemptsRemaining--;

22 if (!attemptsRemaining) {

23 return console.error('Could not load FastComments - could not determine user information (email). Please reach out to FastComments support.');

24 }

25 console.warn('FastComments: No user email found - waiting and trying again.');

26 return setTimeout(tryLoad, attemptsRemaining < 5 ? 3000 : 100); // increase wait time after 5 attempts incase slow internet.

27 }

28 if (profileLink) {

29 // 使用原始 "img" 查询，以防 ThriveCart 更改图片类选择器。

30 const avatarImg = profileLink.querySelector('img');

31 if (avatarImg && avatarImg.src) {

32 isAuthenticated = true;

33 simpleSSO.avatar = avatarImg.src;

34 }

35 // 使用 innerText，以防 ThriveCart 更改配置文件名称的显示方式。

36 if (profileLink.innerText) {

37 isAuthenticated = true;

38 simpleSSO.username = profileLink.innerText;

39 } else {

40 const bold = profileLink.querySelector('b');

41 if (bold && bold.innerText) {

42 isAuthenticated = true;

43 simpleSSO.username = bold.innerText;

44 }

45 }

46 } else {

47 if (!attemptsRemaining) {

48 return console.error('Could not load FastComments - could not determine user information (user name/avatar). Please reach out to FastComments support.');

49 }

50 console.warn('FastComments: No user profile info found - waiting and trying again.');

51 attemptsRemaining--;

52 return setTimeout(tryLoad, attemptsRemaining < 5 ? 3000 : 100); // increase wait time after 5 attempts incase slow internet.

53 }

54

55 let url;

56 const selectedNavLink = document.querySelector('.tcc-browse-lesson.active a');

57

58 if (selectedNavLink) {

59 // 有时 TC 在同一页面使用多个链接，因此我们去重它们。

60 url = getPathnameFromUrl(selectedNavLink.href);

61 } else {

62 // 去除营销参数和域名

63 url = window.location.pathname;

64 }

65

66 if (url) {

67 url = url.replace('/starte-hier', '');

68 url = url.replace('/start-here', '');

69 }

70

71 FastCommentsUI(document.getElementById('fastcomments-widget'), {

72 tenantId: 'demo',

73 urlId: url,

74 simpleSSO: isAuthenticated ? simpleSSO : null

75 });

76 }

77

78 tryLoad();

79

80 function getPathnameFromUrl(url) {

81 try {

82 const parsedUrl = new URL(url);

83 // 去除营销参数和域名

84 return parsedUrl.pathname;

85 } catch (error) {

86 console.error("Invalid URL", url, error);

87 return window.location.pathname; // 默认为当前页面，这样至少有时能起作用

88 }

89 }

90

91 })();

92</script>

93

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.

Testing Note!

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.

成功！您现在应能看到 FastComments 评论小部件。

成功！

恭喜您已在 ThriveCart 中设置 FastComments！如果您遇到 Domain Error，或者想了解如何自定义评论区域，请继续阅读！

FastComments 设计为可定制以匹配您的网站。

如果您想添加自定义样式或调整配置，请查看我们的自定义文档以了解如何操作。