Add Comments to ThriveCart Learn+ Courses

En raison de la conception de ThriveCart Learn+, nous devons ajouter le code FastComments à chaque page de cours sur laquelle nous souhaitons afficher des commentaires.

Nous pouvons utiliser le même extrait de code sur chaque page, et des fils de commentaires distincts seront automatiquement rattachés à chaque page individuelle.

Commençons par ouvrir notre cours dans l'éditeur et ajouter un bloc HTML.

À gauche, vous devriez voir une option Bloc HTML. Faites-le glisser sur la page à l'endroit où vous souhaitez afficher les commentaires.

Ouvrir le cours et ajouter un bloc HTML

Sélectionnez maintenant le nouvel élément HTML. Un bloc apparaîtra sur la gauche où nous pourrons coller notre code.

Vous êtes maintenant prêt pour l'étape 2.

Pour l'étape 2, nous devons copier notre extrait de code. Vérifiez que la ligne 50 ne contient pas "demo" - vous devrez vous assurer qu'elle contient votre tenant id. Il devrait être rempli pour vous.

Copions maintenant notre extrait de code FastComments spécifique à ThriveCart Learn.

Il est assez volumineux, car l'intégration avec ThriveCart offre beaucoup de fonctionnalités, alors cliquez simplement sur le bouton Copier en haut à droite de l'extrait de code :

Code des commentaires 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'); // la classe est différente pour l'aperçu.

14 }

15 // sélecteur large pour le champ d'adresse courriel au cas où ThriveCart changerait l'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')) { // permettre à l'aperçu de fonctionner — pas d'email disponible.

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); // augmenter le temps d'attente après 5 tentatives au cas où la connexion serait lente.

27 }

28 if (profileLink) {

29 // utiliser la requête brute "img" au cas où ThriveCart changerait le sélecteur de classe d'image.

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

31 if (avatarImg && avatarImg.src) {

32 isAuthenticated = true;

33 simpleSSO.avatar = avatarImg.src;

34 }

35 // utiliser innerText au cas où ThriveCart modifierait la façon dont le nom du profil est affiché.

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); // augmenter le temps d'attente après 5 tentatives au cas où la connexion serait lente.

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; // valeur par défaut sur la page actuelle, pour que ça fonctionne au moins parfois

88 }

89 }

90

91 })();

92</script>

93

Collez-le maintenant dans le bloc de code à gauche de l'éditeur ThriveCart. Cela devrait ressembler à ceci :

Code ajouté

C'est tout ! Maintenant, il ne nous reste plus qu'à publier :

Publier

C'est tout ! Vous devriez maintenant voir la boîte de commentaires sur votre cours lorsque vous prévisualisez, et les utilisateurs réels pourront laisser des commentaires sans se connecter ni ressaisir leur nom d'utilisateur/courriel.

Remarque pour les tests !

Si les commentaires anonymes sont désactivés, ce qui est le cas par défaut, vous ne pourrez pas laisser de commentaires en mode Preview en tant qu'utilisateur John Smith. Vous obtiendrez une erreur d'authentification car l'utilisateur par défaut John Smith n'a pas de courriel. Si vous souhaitez tester, nous vous suggérons d'utiliser un code promo et de parcourir votre site comme un utilisateur réel.

Succès ! Vous devriez maintenant voir le widget de commentaires FastComments.

Succès !

Félicitations pour l'installation de FastComments avec ThriveCart ! Si vous avez rencontré une Domain Error, ou si vous souhaitez apprendre comment personnaliser la zone de commentaires, lisez la suite !

FastComments est conçu pour être personnalisé afin de correspondre à votre site.

Si vous souhaitez ajouter des styles personnalisés ou ajuster la configuration, Consultez notre documentation sur la personnalisation et la configuration pour savoir comment.