Add Comments to ThriveCart Learn+ Courses

Из-за конструкции ThriveCart Learn+ нам необходимо добавить код FastComments на каждую страницу курса, на которой мы хотим отображать комментарии.

Мы можем использовать один и тот же фрагмент кода на каждой странице, и отдельные потоки комментариев будут автоматически привязаны к каждой отдельной странице.

Начнём с открытия курса в редакторе и добавления HTML-блока.

Слева вы должны увидеть опцию HTML-блока. Перетащите её на страницу туда, где вы хотите отображать комментарии.

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

Теперь выберите новый HTML-элемент. Слева появится блок, куда мы можем вставить наш код.

Теперь вы готовы к Шагу 2.

Для шага 2 нам нужно скопировать наш фрагмент кода. Проверьте, что строка 50 не содержит "demo" — убедитесь, что там указан ваш tenant id. Он должен быть заполнен автоматически.

Теперь скопируем наш специфичный для ThriveCart-Learn фрагмент кода FastComments.

Он достаточно большой, потому что интеграция с 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 // общий селектор поля ввода 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')) { // разрешить работу превью — email отсутствует.

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 нет email. Если вы хотите протестировать, мы рекомендуем воспользоваться купонным кодом и пройти по сайту как реальный пользователь.

Успех! Теперь вы должны видеть виджет комментариев FastComments.

Успех!

Поздравляем с настройкой FastComments для ThriveCart! Если вы столкнулись с ошибкой Domain Error, или хотите узнать, как настроить область комментариев, читайте дальше!

FastComments разработан так, чтобы его можно было настраивать под ваш сайт.

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