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 séparés seront automatiquement rattachés à chaque page individuelle.

Nous allons commencer par ouvrir notre cours dans l'éditeur et ajouter un bloc HTML.

Sur la gauche, vous devriez voir une option de bloc HTML. Faites-le glisser dans 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 à 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 n'indique pas "demo" — vous voudrez vous assurer que cela contient votre tenant id. Il devrait être rempli pour vous.

Maintenant, copions notre extrait de code FastComments spécifique à ThriveCart Learn.

Il est assez volumineux, car l'intégration avec ThriveCart offre de nombreuses fonctionnalités, donc 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 du champ email 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')) { // autoriser l'aperçu à 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 en cas d'internet lent.

27 }

28 if (profileLink) {

29 // utiliser la requête brute "img" au cas où ThriveCart changerait le sélecteur de classe de l'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 changerait 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 en cas d'internet lent.

53 }

54

55 let url;

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

57

58 if (selectedNavLink) {

59 // parfois TC utilise plusieurs liens sur la même page, donc éliminons les doublons.

60 url = getPathnameFromUrl(selectedNavLink.href);

61 } else {

62 // supprimer les paramètres marketing et le nom de domaine

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 // supprimer les paramètres marketing et le nom de domaine

84 return parsedUrl.pathname;

85 } catch (error) {

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

87 return window.location.pathname; // revenir à l'actuel par défaut, pour qu'au moins cela fonctionne parfois

88 }

89 }

90

91 })();

92</script>

93

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

Code ajouté

C'est tout ! Il ne reste plus qu'à publier :

Publier

C'est tout ! Vous devriez maintenant voir la zone de commentaire sur votre cours lorsque vous faites un aperçu, et les utilisateurs réels pourront laisser des commentaires sans se connecter ni ressaisir leur nom d'utilisateur/email.

Remarque de test !

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.

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

Succès !

Félicitations pour avoir configuré FastComments avec ThriveCart ! Si vous avez rencontré un 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 s'adapter à votre site.

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