Add Comments to ThriveCart Learn+ Courses

A causa del funzionamento di ThriveCart Learn+, dobbiamo inserire il codice FastComments in ogni pagina del corso in cui vogliamo visualizzare i commenti.

Possiamo usare lo stesso frammento di codice su ogni pagina, e i thread di commenti separati saranno automaticamente collegati a ciascuna pagina.

Inizieremo aprendo il corso nell'editor e aggiungendo un blocco HTML.

Sulla sinistra dovresti vedere un'opzione per un blocco HTML. Trascinala nella pagina nel punto in cui vuoi visualizzare i commenti.

Open Course and Add HTML Block

Ora seleziona il nuovo elemento HTML. Apparirà un blocco sulla sinistra dove possiamo incollare il nostro codice.

Ora sei pronto per il Passo 2.

Per il Passo 2 dobbiamo copiare il nostro snippet di codice. Verifica che la riga 50 non dica "demo" - assicurati che questa contenga il tuo tenant id. Dovrebbe essere precompilato per te.

Adesso copiamo il nostro snippet di codice FastComments specifico per ThriveCart Learn.

Codice commenti 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'); // class is different for preview.

14 }

15 // broad email input field selector incase ThriveCart changes 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')) { // allow preview to work - no email available.

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); // increase wait time after 5 attempts incase slow internet.

27 }

28 if (profileLink) {

29 // use raw "img" query incase ThriveCart changes image class selector.

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

31 if (avatarImg && avatarImg.src) {

32 isAuthenticated = true;

33 simpleSSO.avatar = avatarImg.src;

34 }

35 // use innerText incase ThriveCart changes how profile name is displayed.

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); // increase wait time after 5 attempts incase slow internet.

53 }

54

55 let url;

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

57

58 if (selectedNavLink) {

59 // sometimes TC uses multiple links the same page, so let's de-dupe them.

60 url = getPathnameFromUrl(selectedNavLink.href);

61 } else {

62 // trim marketing parameters and domain name

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 // trim marketing parameters and domain name

84 return parsedUrl.pathname;

85 } catch (error) {

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

87 return window.location.pathname; // default to current, so at least it works sometimes

88 }

89 }

90

91 })();

92</script>

93

Ora incollalo nel blocco di codice a sinistra nell'editor di ThriveCart. Dovrebbe apparire così:

Codice aggiunto

Fatto! Ora dobbiamo solo pubblicare:

Pubblica

Fatto! Ora dovresti vedere la casella dei commenti sul tuo corso quando lo visualizzi in anteprima, e gli utenti reali potranno lasciare commenti senza effettuare l'accesso o inserire nuovamente il loro username/email.

Nota di test!

Se hai i commenti anonimi disabilitati, cosa predefinita, non potrai lasciare commenti in modalità Preview come utente John Smith. Riceverai un errore di autenticazione in quanto l'utente predefinito John Smith non ha una email. Se vuoi testare, ti suggeriamo di usare un codice coupon e navigare il sito come un utente reale.

Successo! Ora dovresti vedere il widget dei commenti FastComments.

Successo!

Congratulazioni per aver configurato FastComments con ThriveCart! Se hai riscontrato un errore di dominio, oppure vuoi imparare come personalizzare l'area dei commenti, continua a leggere!

FastComments è progettato per essere personalizzato per adattarsi al tuo sito.

Se desideri aggiungere stili personalizzati o modificare la configurazione, Consulta la nostra documentazione sulle personalizzazioni per scoprire come.