Add Comments to ThriveCart Learn+ Courses

Vanwege het ontwerp van ThriveCart Learn+ moeten we de FastComments-code toevoegen aan elke cursuspagina waarop we opmerkingen willen weergeven.

We kunnen hetzelfde codefragment op elke pagina gebruiken, en afzonderlijke reactiedraden worden automatisch aan elke individuele pagina gekoppeld.

We beginnen met het openen van onze cursus in de editor en het toevoegen van een HTML-blok.

Aan de linkerkant zou je een optie voor een HTML-blok moeten zien. Sleep die naar de pagina waar je opmerkingen wilt weergeven.

Cursus openen en HTML-blok toevoegen

Selecteer nu het nieuwe HTML-element. Er verschijnt een blok aan de linkerkant waar we onze code kunnen plakken.

Je bent nu klaar voor stap 2.

Voor stap 2 moeten we ons codefragment kopiëren. Controleer dat regel 50 niet "demo" zegt - zorg ervoor dat dit uw tenant id bevat. Het zou voor u ingevuld moeten zijn.

Kopieer nu ons ThriveCart-Learn-specifieke FastComments-codefragment.

Het is vrij omvangrijk, omdat de integratie met ThriveCart veel functies heeft, dus klik gewoon op de Kopiëren-knop rechtsboven in het codefragment:

ThriveCart Learn+ Reactiescode

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'); // klasse is anders voor preview.

14 }

15 // brede selector voor e-mailinvoerveld voor het geval ThriveCart de id verandert.

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')) { // laat preview werken - geen e-mailadres beschikbaar.

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); // verhoog de wachttijd na 5 pogingen voor het geval van trage internetverbinding.

27 }

28 if (profileLink) {

29 // gebruik de ruwe "img" query voor het geval ThriveCart de image class-selector verandert.

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

31 if (avatarImg && avatarImg.src) {

32 isAuthenticated = true;

33 simpleSSO.avatar = avatarImg.src;

34 }

35 // gebruik innerText voor het geval ThriveCart verandert hoe de profielnaam wordt weergegeven.

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); // verhoog de wachttijd na 5 pogingen voor het geval van trage internetverbinding.

53 }

54

55 let url;

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

57

58 if (selectedNavLink) {

59 // soms gebruikt TC meerdere links naar dezelfde pagina, dus verwijderen we duplicaten.

60 url = getPathnameFromUrl(selectedNavLink.href);

61 } else {

62 // verwijder marketingparameters en domeinnaam

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 // verwijder marketingparameters en domeinnaam

84 return parsedUrl.pathname;

85 } catch (error) {

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

87 return window.location.pathname; // standaard naar de huidige locatie, zodat het soms in ieder geval werkt

88 }

89 }

90

91 })();

92</script>

93

Plak het nu in het codeblok links in de ThriveCart-editor. Het zou er zo uit moeten zien:

Code toegevoegd

Dat is alles! Nu hoeven we het alleen nog te publiceren:

Publiceren

Dat is alles! Je zou nu het opmerkingenvak op je cursus moeten zien wanneer je een preview bekijkt, en echte gebruikers kunnen opmerkingen achterlaten zonder opnieuw in te loggen of hun gebruikersnaam/e-mail nog een keer in te voeren.

Testopmerking!

Als je anoniem reageren uitgeschakeld hebt, wat standaard het geval is, kun je geen opmerkingen plaatsen in de Preview-modus als de gebruiker John Smith is. Je krijgt een authenticatiefout omdat de standaardgebruiker John Smith geen e-mailadres heeft. Als je wilt testen, raden we aan een kortingscode te gebruiken en je site te doorlopen alsof je een echte gebruiker bent.

Succes! U zou nu de FastComments Comment Widget moeten zien.

Succes!

Gefeliciteerd met het instellen van FastComments voor ThriveCart! Als u een Domain Error tegenkomt, of wilt leren hoe u het reactiegebied kunt aanpassen, lees verder!

FastComments is ontworpen om aangepast te worden zodat het bij uw site past.

Als u aangepaste styling wilt toevoegen, of de configuratie wilt bijstellen, Bekijk onze documentatie over aanpassingen en configuratie om te leren hoe.