Add Comments to ThriveCart Learn+ Courses

Aufgrund des Designs von ThriveCart Learn+ müssen wir den FastComments-Code zu jeder Kursseite hinzufügen, auf der wir Kommentare anzeigen möchten.

Wir können denselben Code-Snippet auf jeder Seite verwenden, und separate Kommentar-Threads werden automatisch jeder einzelnen Seite zugeordnet.

Wir beginnen damit, unseren Kurs im Editor zu öffnen und einen HTML-Block hinzuzufügen.

Auf der linken Seite sollten Sie eine Option für einen HTML-Block sehen. Ziehen Sie diesen an die Stelle der Seite, an der Sie Kommentare anzeigen möchten.

Kurs öffnen und HTML-Block hinzufügen

Wählen Sie nun das neue HTML-Element aus. Auf der linken Seite erscheint ein Feld, in das wir unseren Code einfügen können.

Nun sind Sie bereit für Schritt 2.

Für Schritt 2 müssen wir unseren Code-Snippet kopieren. Überprüfen Sie, dass Zeile 50 nicht "demo" sagt – Sie sollten sicherstellen, dass hier Ihre Tenant-ID steht. Sie sollte für Sie ausgefüllt sein.

Kopieren wir nun unseren ThriveCart-Learn-spezifischen FastComments-Code-Snippet.

Er ist ziemlich groß, weil die Integration mit ThriveCart viele Funktionen hat. Klicken Sie einfach auf die Schaltfläche "Copy" oben rechts im Code-Snippet:

ThriveCart Learn+ Kommentar-Code

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 ist in der Vorschau anders.

14 }

15 // allgemeiner E-Mail-Eingabefeld-Selektor für den Fall, dass ThriveCart die ID ändert.

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')) { // Vorschau erlauben - keine E-Mail verfügbar.

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); // Wartezeit nach 5 Versuchen erhöhen, falls langsames Internet.

27 }

28 if (profileLink) {

29 // Rohes "img"-Query verwenden, falls ThriveCart die Bild-Klassen-Selector ändert.

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

31 if (avatarImg && avatarImg.src) {

32 isAuthenticated = true;

33 simpleSSO.avatar = avatarImg.src;

34 }

35 // innerText verwenden, falls ThriveCart die Anzeige des Profilnamens ändert.

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); // Wartezeit nach 5 Versuchen erhöhen, falls langsames Internet.

53 }

54

55 let url;

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

57

58 if (selectedNavLink) {

59 // Manchmal verwendet TC mehrere Links auf derselben Seite, daher doppelte entfernen.

60 url = getPathnameFromUrl(selectedNavLink.href);

61 } else {

62 // Marketing-Parameter und Domainnamen abschneiden

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 // Marketing-Parameter und Domainnamen abschneiden

84 return parsedUrl.pathname;

85 } catch (error) {

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

87 return window.location.pathname; // Standard auf aktuelle, damit es zumindest manchmal funktioniert

88 }

89 }

90

91 })();

92</script>

93

Fügen Sie es nun in das Code-Feld links im ThriveCart-Editor ein. Es sollte so aussehen:

Code hinzugefügt

Das war's! Jetzt müssen wir es nur noch veröffentlichen:

Veröffentlichen

Das war's! Sie sollten jetzt das Kommentarfeld in Ihrem Kurs sehen, wenn Sie die Vorschau aufrufen, und echte Benutzer können Kommentare hinterlassen ohne sich anzumelden oder ihren Benutzernamen/Ihre E-Mail ein zweites Mal anzugeben.

Testhinweis!

Wenn Sie anonymes Kommentieren deaktiviert haben, was standardmäßig der Fall ist, können Sie im Preview-Modus als der Benutzer John Smith keine Kommentare hinterlassen. Sie erhalten einen Authentifizierungsfehler, da der Standardbenutzer John Smith keine E-Mail hat. Wenn Sie testen möchten, empfehlen wir, einen Gutscheincode zu verwenden und die Seite wie ein echter Benutzer zu durchlaufen.

Erfolgreich! Sie sollten jetzt das FastComments Kommentar-Widget sehen.

Erfolgreich!

Herzlichen Glückwunsch zur Einrichtung von FastComments mit ThriveCart! Wenn Sie auf einen Domain-Fehler gestoßen sind oder erfahren möchten, wie Sie den Kommentarbereich anpassen können, lesen Sie weiter!

FastComments ist dafür ausgelegt, an Ihre Website angepasst zu werden.

Wenn Sie benutzerdefiniertes Styling hinzufügen oder die Konfiguration anpassen möchten, sehen Sie sich unsere Dokumentation zu Anpassungen und Konfiguration an, um zu erfahren, wie.