Add Comments to ThriveCart Learn+ Courses

Zbog dizajna ThriveCart Learn+, moramo dodati FastComments kod na svaku stranicu tečaja na kojoj želimo prikazivati komentare.

Možemo koristiti isti isječak koda na svakoj stranici, a zasebne niti komentara automatski će biti vezane uz svaku pojedinu stranicu.

Počet ćemo otvaranjem našeg tečaja u uređivaču i dodavanjem HTML bloka.

Na lijevoj strani trebali biste vidjeti opciju HTML bloka. Povucite ga na stranicu gdje želite prikazati komentare.

Otvorite tečaj i dodajte HTML blok

Sada odaberite novi HTML element. S lijeve strane pojavit će se blok u koji možemo zalijepiti naš kod.

Sada ste spremni za Korak 2.

Za korak 2 moramo kopirati naš isječak koda. Provjerite da na liniji 50 ne piše "demo" - želite osigurati da tu stoji vaš tenant id. Trebalo bi biti popunjeno za vas.

Sada kopirajmo naš ThriveCart-Learn-specifični FastComments isječak koda.

Prilično je velik, jer integracija s ThriveCartom ima puno značajki, pa jednostavno kliknite gumb Copy u gornjem desnom kutu isječka koda:

ThriveCart Learn+ kod komentara

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 je drugačija za preview.

14 }

15 // široki selektor polja za unos e-pošte u slučaju da ThriveCart promijeni 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')) { // dopustiti da preview radi - nema dostupne e-pošte.

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); // povećaj vrijeme čekanja nakon 5 pokušaja u slučaju sporog interneta.

27 }

28 if (profileLink) {

29 // koristi sirovu "img" upit u slučaju da ThriveCart promijeni selektor klase slike.

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

31 if (avatarImg && avatarImg.src) {

32 isAuthenticated = true;

33 simpleSSO.avatar = avatarImg.src;

34 }

35 // koristi innerText u slučaju da ThriveCart promijeni način prikaza imena profila.

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); // povećaj vrijeme čekanja nakon 5 pokušaja u slučaju sporog interneta.

53 }

54

55 let url;

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

57

58 if (selectedNavLink) {

59 // ponekad TC koristi više poveznica na istoj stranici, pa ih uklonimo kako bismo izbjegli duplikate.

60 url = getPathnameFromUrl(selectedNavLink.href);

61 } else {

62 // obreži marketinške parametre i naziv domene

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 // obreži marketinške parametre i naziv domene

84 return parsedUrl.pathname;

85 } catch (error) {

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

87 return window.location.pathname; // zadano na trenutačnu stranicu, tako da barem ponekad radi

88 }

89 }

90

91 })();

92</script>

93

Sada ga zalijepite u blok koda s lijeve strane u ThriveCart editoru. Trebalo bi izgledati ovako:

Dodani kod

To je to! Sad samo trebamo objaviti:

Objavi

To je to! Sada biste trebali vidjeti okvir za komentare na svom tečaju pri pregledavanju, a stvarni korisnici moći će ostavljati komentare bez ponovnog prijavljivanja ili ponovnog unošenja svog korisničkog imena/e-pošte.

Testing Note!

Ako imate onemogućeno anonimno komentiranje, što je zadano, nećete moći ostaviti komentare u Preview načinu rada kao korisnik John Smith. Dobit ćete grešku autentifikacije jer zadani korisnik John Smith nema e-poštu. Ako želite testirati, predlažemo da upotrijebite kupon i prođete kroz svoj site kao stvarni korisnik.

Uspjeh! Sada biste trebali vidjeti FastComments widget za komentare.

Uspjeh!

Čestitamo na postavljanju FastComments s ThriveCartom! Ako ste naišli na Domain Error, ili želite naučiti kako prilagoditi područje za komentare, čitajte dalje!

FastComments je dizajniran da se prilagodi vašoj stranici.

Ako želite dodati prilagođene stilove ili podesiti konfiguraciju, Pogledajte našu dokumentaciju za prilagodbu i konfiguraciju da saznate kako.