Add Comments to ThriveCart Learn+ Courses

Поради дизайна на ThriveCart Learn+ трябва да добавим кода на FastComments във всяка страница на курса, на която искаме да показваме коментари.

Можем да използваме един и същ фрагмент код на всяка страница, а отделните нишки за коментари автоматично ще се свържат с всяка отделна страница.

Започваме, като отворим нашия курс в редактора и добавим HTML блок.

Отляво трябва да видите опция за HTML блок. Плъзнете го в страницата там, където искате да показвате коментари.

Отворете курса и добавете HTML блок

Сега изберете новия HTML елемент. Отляво ще се покаже блок, в който можем да поставим нашия код.

Сега сте готови за Стъпка 2.

За Стъпка 2 трябва да копираме нашия фрагмент код. Проверете, че ред 50 не казва "demo" - ще искате това да съдържа вашия tenant id. Той трябва да бъде попълнен за вас.

Сега нека копираме нашия фрагмент с код на FastComments, специфичен за ThriveCart Learn.

Той е доста голям, защото интеграцията с ThriveCart има много функции, така че просто натиснете бутона Copy в горния десен ъгъл на фрагмента с код:

Код за коментари за 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'); // класът е различен за визуализация.

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 промени селектора на изображението.

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 Comment Widget.

Успешно!

Поздравления за настройването на FastComments с ThriveCart! Ако сте срещнали Domain Error, или бихте искали да научите как да персонализирате зоната за коментари, продължете да четете!

FastComments е разработен да бъде персонализиран, за да съответства на вашия сайт.

Ако искате да добавите персонализирани стилове или да коригирате конфигурацията, Прегледайте нашата документация за персонализиране, за да научите как.