Add Comments to ThriveCart Learn+ Courses

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.

Na Kroku 2 musimy skopiować nasz fragment kodu. Sprawdź, czy w linii 50 nie ma napisu "demo" - upewnij się, że znajduje się tam Twój tenant id. Powinno być wypełnione dla Ciebie.

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 Kopiuj 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, gdy ThriveCart zmieni 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')) { // pozwól, by 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, gdy ThriveCart zmieni selektor klasy obrazu.

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, gdy ThriveCart zmieni sposób wyświetlania nazwy profilu.

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 // usuń 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 // usuń 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 do bieżącej, żeby przynajmniej czasem działało

88 }

89 }

90

91 })();

92</script>

93

Now paste it into the code block on the left in the ThriveCart editor. It should look like this:

Kod dodany

That's it! Now we just have to publish:

Opublikuj

That's it! You should now see the comment box on your course when you preview, and real users will be able to leave comments without signing in or leaving their username/email a second time.

Testing Note!

If you have anonymous commenting disabled, which it is by default, you won't be able to leave comments in Preview mode as the John Smith user. You will get an authentication error as the default John Smith user has no email. If you want to test, we suggest you use a coupon code and go through your site like an actual user.

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.