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 создан так, чтобы его можно было настроить под ваш сайт.

Если вы хотите добавить собственные стили или изменить конфигурацию, ознакомьтесь с нашей документацией по настройке, чтобы узнать, как это сделать.