Dodaj komentarze do kursów ThriveCart Learn+

Ze względu na sposób działania ThriveCart Learn+ musimy dodać kod FastComments do każdej strony kursu, na której chcemy wyświetlać komentarze.

Możemy użyć tego samego fragmentu kodu na każdej stronie, a oddzielne wątki komentarzy zostaną automatycznie powiązane z każdą poszczególną stroną.

Zaczniemy od otwarcia kursu w edytorze i dodania bloku HTML.

Po lewej powinieneś zobaczyć opcję bloku HTML. Przeciągnij go na stronę w miejscu, gdzie chcesz wyświetlać komentarze.

Otwórz kurs i dodaj blok HTML

Teraz wybierz nowy element HTML. Po lewej pojawi się blok, w którym możemy wkleić nasz kod.

Teraz możesz przejść do Kroku 2.

W Kroku 2 musimy skopiować nasz fragment kodu. Sprawdź, czy w linii 50 nie ma napisu "demo" - upewnij się, że znajduje się tam Twój identyfikator tenant. Powinien być wypełniony automatycznie.

Teraz skopiujmy nasz fragment kodu FastComments specyficzny dla ThriveCart-Learn.

Jest dość duży, ponieważ integracja z ThriveCart ma wiele funkcji, więc po prostu kliknij przycisk Copy w prawym górnym rogu fragmentu kodu:

Kod komentarzy 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'); // klasa jest inna w podglądzie.

14 }

15 // szeroki selektor pola e-mail na wypadek zmiany id przez ThriveCart.

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')) { // pozwól, aby podgląd działał - brak dostępnego e-maila.

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); // zwiększ czas oczekiwania po 5 próbach na wypadek wolnego internetu.

27 }

28 if (profileLink) {

29 // użyj surowego zapytania "img" na wypadek zmiany selektora klasy obrazu przez ThriveCart.

30 const avatarImg = profileLink.querySelector('img');

31 if (avatarImg && avatarImg.src) {

32 isAuthenticated = true;

33 simpleSSO.avatar = avatarImg.src;

34 }

35 // użyj innerText na wypadek zmiany sposobu wyświetlania nazwy profilu przez 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); // zwiększ czas oczekiwania po 5 próbach na wypadek wolnego internetu.

53 }

54

55 let url;

56 const selectedNavLink = document.querySelector('.tcc-browse-lesson.active a');

57

58 if (selectedNavLink) {

59 // czasami TC używa wielu linków do tej samej strony, więc usuńmy duplikaty.

60 url = getPathnameFromUrl(selectedNavLink.href);

61 } else {

62 // przytnij parametry marketingowe i nazwę domeny

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 // przytnij parametry marketingowe i nazwę domeny

84 return parsedUrl.pathname;

85 } catch (error) {

86 console.error("Invalid URL", url, error);

87 return window.location.pathname; // domyślnie bieżąca, aby przynajmniej czasami działało

88 }

89 }

90

91 })();

92</script>

93

Teraz wklej go do bloku kodu po lewej stronie w edytorze ThriveCart. Powinno to wyglądać tak:

Kod dodany

To wszystko! Teraz musimy tylko opublikować:

Publikuj

Gotowe! Powinieneś teraz zobaczyć pole komentarzy w swoim kursie podczas podglądu, a prawdziwi użytkownicy będą mogli zostawiać komentarze bez logowania się ani ponownego podawania nazwy użytkownika/e-maila.

Uwaga dotycząca testowania!

Jeśli masz wyłączone anonimowe komentowanie (co jest domyślne), nie będziesz mógł zostawiać komentarzy w trybie Preview jako użytkownik John Smith. Otrzymasz błąd uwierzytelniania, ponieważ domyślny użytkownik John Smith nie ma adresu e-mail. Jeśli chcesz przetestować, sugerujemy użycie kodu kuponu i przejście przez swoją stronę jak prawdziwy użytkownik.

Sukces! Powinieneś teraz widzieć FastComments Comment Widget.

Sukces!

Gratulacje za skonfigurowanie FastComments z ThriveCart! Jeśli napotkałeś Domain Error lub chcesz dowiedzieć się, jak dostosować obszar komentarzy, czytaj dalej!

FastComments został zaprojektowany tak, aby można go było dostosować do twojej strony.

Jeśli chcesz dodać niestandardowe style lub zmodyfikować konfigurację, Zapoznaj się z naszą dokumentacją dotyczącą dostosowań i konfiguracji, aby dowiedzieć się, jak.