向 ThriveCart Learn+ 课程添加评论

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

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

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

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

打开课程并添加 HTML 块

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

现在您已准备好进行第 2 步。

对于第 2 步，我们需要复制代码片段。请检查第 50 行是否显示为 "demo"——你需要确保这里填入的是你的租户 ID。它应该已经自动为你填好了。

现在让我们复制 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 不同。

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')) { // 允许预览正常工作 - 没有可用的邮箱。

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); // 5 次尝试后增加等待时间，以防网络较慢。

27 }

28 if (profileLink) {

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

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); // 5 次尝试后增加等待时间，以防网络较慢。

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

现在将其粘贴到 ThriveCart 编辑器左侧的代码块中。它应该看起来像这样：

代码已添加

就是这样！现在我们只需要发布：

发布

完成了！现在你在预览时应该能在课程中看到评论框，真实用户将能够无需登录或再次输入用户名/邮箱即可发表评论。

测试注意事项！

如果你已禁用匿名评论（默认情况下是禁用的），你将无法在 Preview 模式下以 John Smith 用户身份发表评论。你会收到一个身份验证错误，因为默认的 John Smith 用户没有邮箱。如果你想进行测试，我们建议你使用优惠券代码，像真实用户一样浏览你的网站。

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

成功！

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

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

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