Add Comments to ThriveCart Learn+ Courses

På grund af udformningen af ThriveCart Learn+ skal vi tilføje FastComments-koden til hver kursusside, hvor vi ønsker at vise kommentarer.

Vi kan bruge det samme kodeudsnit på alle sider, og separate kommentartråde vil automatisk blive knyttet til hver enkelt side.

Vi begynder med at åbne vores kursus i editoren og tilføje en HTML-blok.

Til venstre bør du se en mulighed for en HTML-blok. Træk den ind på siden, hvor du vil vise kommentarer.

Åbn kursus og tilføj HTML-blok

Vælg nu det nye HTML-element. Der vises en blok til venstre, hvor vi kan indsætte vores kode.

Nu er du klar til trin 2.

For Step 2 skal vi kopiere vores kodeudsnit. Tjek, at linje 50 ikke siger "demo" - du skal sikre, at dette indeholder your tenant id. Det burde være udfyldt for dig.

Nu kopierer vi vores ThriveCart-Learn-specifikke FastComments-kodeudsnit.

Det er ret stort, fordi integrationen med ThriveCart har mange funktioner, så klik bare på Copy-knappen i øverste højre hjørne af kodeudsnittet:

ThriveCart Learn+ Kommentarer-kode

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'); // klassen er forskellig i forhåndsvisning.

14 }

15 // bredt e-mail-input-felt-selektor i tilfælde af, at ThriveCart ændrer 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 // brug rå "img" forespørgsel i tilfælde af, at ThriveCart ændrer billedklasseselektor.

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

31 if (avatarImg && avatarImg.src) {

32 isAuthenticated = true;

33 simpleSSO.avatar = avatarImg.src;

34 }

35 // brug innerText i tilfælde af, at ThriveCart ændrer, hvordan profilnavnet vises.

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 // nogle gange bruger TC flere links på samme side, så lad os fjerne dubletter.

60 url = getPathnameFromUrl(selectedNavLink.href);

61 } else {

62 // trim marketing-parametre og domænenavn

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-parametre og domænenavn

84 return parsedUrl.pathname;

85 } catch (error) {

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

87 return window.location.pathname; // benyt standard til den aktuelle, så det virker i det mindste nogle gange

88 }

89 }

90

91 })();

92</script>

93

Nu indsætter du det i kodeblokken til venstre i ThriveCart-editoren. Det burde se sådan ud:

Kode tilføjet

Det var det! Nu skal vi bare udgive:

Udgiv

Det var det! Du burde nu se kommentarboksen på dit kursus, når du forhåndsviser, og rigtige brugere vil kunne efterlade kommentarer uden at logge ind eller indtaste deres brugernavn/e-mail igen.

Testnote!

Hvis du har anonym kommentering deaktiveret, hvilket den er som standard, vil du ikke kunne efterlade kommentarer i Preview-tilstand som John Smith-brugeren. Du vil få en autentificeringsfejl, da standardbrugeren John Smith ingen e-mail har. Hvis du vil teste, foreslår vi, at du bruger en rabatkode og går igennem dit site som en rigtig bruger.

Succes! Du skulle nu kunne se FastComments Comment Widget.

Succes!

Tillykke med at have sat FastComments op med ThriveCart! Hvis du er stødt på en Domain Error, eller gerne vil lære, hvordan du tilpasser kommentarfeltet, så læs videre!

FastComments er designet til at kunne tilpasses, så det matcher din hjemmeside.

Hvis du gerne vil tilføje brugerdefineret styling eller justere konfigurationen, Se vores dokumentation om tilpasning og konfiguration for at lære hvordan.