Ajouter des commentaires aux cours ThriveCart Learn+

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 ne dit pas "demo" - vous devez vous assurer qu'elle contient votre identifiant de tenant. Il devrait être pré-rempli pour vous.

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

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

Code de 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 de saisie e-mail 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')) { // permet à l'aperçu de fonctionner - aucun e-mail 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); // augmente le temps d'attente après 5 tentatives au cas où la connexion serait lente.

27 }

28 if (profileLink) {

29 // utilise une requête "img" brute 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 // utilise 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); // augmente 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 // parfois TC utilise plusieurs liens pour la même page, donc dédupliquons-les.

60 url = getPathnameFromUrl(selectedNavLink.href);

61 } else {

62 // supprime 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 // supprime 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; // utilise la valeur actuelle par défaut, pour que cela fonctionne au moins 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é

Et voilà ! Il ne nous reste plus qu'à publier :

Publier

Et voilà ! Vous devriez maintenant voir la boîte de commentaires sur votre cours lors de l'aperçu, et les vrais utilisateurs pourront laisser des commentaires sans se connecter ni ressaisir leur nom d'utilisateur/e-mail une seconde fois.

Note de test !

Si vous avez désactivé les commentaires anonymes, 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 d'e-mail. Si vous souhaitez tester, nous vous suggérons d'utiliser un code promo et de parcourir votre site comme un véritable utilisateur.

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.