Add Comments to ThriveCart Learn+ Courses

Через конструкцію ThriveCart Learn+ нам потрібно додавати код FastComments на кожну сторінку курсу, на якій ми хочемо показувати коментарі.

Ми можемо використовувати однаковий фрагмент коду на кожній сторінці, а окремі потоки коментарів автоматично прив'яжуться до кожної окремої сторінки.

Почнемо з того, що відкриємо наш курс у редакторі та додамо HTML-блок.

Зліва ви повинні побачити опцію HTML-блоку. Перетягніть її на сторінку туди, де ви хочете відображати коментарі.

Відкрийте курс і додайте HTML-блок

Тепер виберіть новий HTML-елемент. Зліва з'явиться блок, куди ми можемо вставити наш код.

Тепер ви готові до Кроку 2.

На кроці 2 ми маємо скопіювати наш фрагмент коду. Перевірте, що в рядку 50 не вказано "demo" - вам потрібно переконатися, що там ваш tenant 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'); // клас відрізняється для режиму попереднього перегляду.

14 }

15 // загальний селектор поля вводу email на випадок, якщо 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.

Успіх!

Вітаємо з налаштуванням FastComments у ThriveCart! Якщо у вас виникла помилка Domain Error, або ви хочете дізнатися, як налаштувати область коментарів, читайте далі!

FastComments спроєктовано так, щоб його можна було налаштувати відповідно до вашого сайту.

Якщо ви хочете додати власні стилі або змінити конфігурацію, Перегляньте нашу документацію з кастомізації та конфігурації, щоб дізнатися як.