Add Comments to ThriveCart Learn+ Courses

Εξαιτίας του σχεδιασμού του ThriveCart Learn+, πρέπει να προσθέσουμε τον κώδικα FastComments σε κάθε σελίδα μαθήματος στην οποία θέλουμε να εμφανίζονται σχόλια.

Μπορούμε να χρησιμοποιήσουμε το ίδιο απόσπασμα κώδικα σε κάθε σελίδα, και ξεχωριστές συζητήσεις σχολίων θα συνδεθούν αυτόματα με κάθε μεμονωμένη σελίδα.

Θα ξεκινήσουμε ανοίγοντας το μάθημά μας στον επεξεργαστή και προσθέτοντας ένα μπλοκ HTML.

Στα αριστερά θα πρέπει να δείτε μια επιλογή μπλοκ HTML. Σύρετε αυτό στη σελίδα όπου θέλετε να εμφανίζονται τα σχόλια.

Άνοιγμα μαθήματος και προσθήκη μπλοκ HTML

Τώρα επιλέξτε το νέο στοιχείο HTML. Ένα μπλοκ θα εμφανιστεί στα αριστερά όπου μπορούμε να επικολλήσουμε τον κώδικά μας.

Τώρα είστε έτοιμοι για το Βήμα 2.

Για το Βήμα 2 πρέπει να αντιγράψουμε το απόσπασμα κώδικα. Ελέγξτε ότι η γραμμή 50 δεν γράφει "demo" - θα θέλετε να βεβαιωθείτε ότι αυτό περιέχει το tenant id σας. Θα πρέπει να έχει συμπληρωθεί για εσάς.

Τώρα ας αντιγράψουμε το ειδικό για ThriveCart Learn απόσπασμα κώδικα του FastComments.

Είναι αρκετά μεγάλο, επειδή η ενσωμάτωση με το ThriveCart έχει πολλές δυνατότητες, οπότε απλώς κάντε κλικ στο κουμπί Copy επάνω δεξιά στο απόσπασμα κώδικα:

Κώδικας σχολίων 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'); // η κλάση είναι διαφορετική για την προεπισκόπηση.

14 }

15 // γενικός επιλογέας πεδίου email σε περίπτωση που το ThriveCart αλλάξει το 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')) { // επιτρέψτε στην προεπισκόπηση να λειτουργήσει - δεν υπάρχει διαθέσιμο email.

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); // αύξηση του χρόνου αναμονής μετά από 5 προσπάθειες σε περίπτωση αργής σύνδεσης στο διαδίκτυο.

27 }

28 if (profileLink) {

29 // χρησιμοποιήστε την ακατέργαστη επιλογή "img" σε περίπτωση που το ThriveCart αλλάξει τον επιλεκτή κλάσης της εικόνας.

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

31 if (avatarImg && avatarImg.src) {

32 isAuthenticated = true;

33 simpleSSO.avatar = avatarImg.src;

34 }

35 // χρησιμοποιήστε innerText σε περίπτωση που το ThriveCart αλλάξει τον τρόπο εμφάνισης του ονόματος προφίλ.

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); // αύξηση του χρόνου αναμονής μετά από 5 προσπάθειες σε περίπτωση αργής σύνδεσης στο διαδίκτυο.

53 }

54

55 let url;

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

57

58 if (selectedNavLink) {

59 // μερικές φορές το TC χρησιμοποιεί πολλούς συνδέσμους στην ίδια σελίδα, οπότε ας αφαιρέσουμε τα διπλότυπα.

60 url = getPathnameFromUrl(selectedNavLink.href);

61 } else {

62 // αφαιρέστε παραμέτρους μάρκετινγκ και το όνομα τομέα

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 // αφαιρέστε παραμέτρους μάρκετινγκ και το όνομα τομέα

84 return parsedUrl.pathname;

85 } catch (error) {

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

87 return window.location.pathname; // προεπιλογή στην τρέχουσα, έτσι ώστε τουλάχιστον να λειτουργεί μερικές φορές

88 }

89 }

90

91 })();

92</script>

93

Τώρα επικολλήστε το στο μπλοκ κώδικα στα αριστερά στον επεξεργαστή του ThriveCart. Θα πρέπει να μοιάζει έτσι:

Κώδικας Προστέθηκε

Αυτό ήταν! Τώρα μένει μόνο να δημοσιεύσουμε:

Δημοσίευση

Αυτό ήταν! Τώρα θα πρέπει να δείτε το πλαίσιο σχολίων στο μάθημά σας όταν κάνετε προεπισκόπηση, και οι πραγματικοί χρήστες θα μπορούν να αφήνουν σχόλια χωρίς να συνδέονται ή να εισάγουν ξανά το όνομα χρήστη/το email τους.

Σημείωση δοκιμής!

Αν έχετε την ανώνυμη δυνατότητα σχολιασμού απενεργοποιημένη, όπως είναι από προεπιλογή, δεν θα μπορείτε να αφήσετε σχόλια σε λειτουργία Preview ως χρήστης John Smith. Θα λάβετε σφάλμα πιστοποίησης καθώς ο προεπιλεγμένος χρήστης John Smith δεν έχει email. Αν θέλετε να δοκιμάσετε, σας προτείνουμε να χρησιμοποιήσετε έναν κωδικό κουπονιού και να περάσετε από τον ιστότοπό σας όπως ένας κανονικός χρήστης.

Επιτυχία! Τώρα θα πρέπει να βλέπετε το FastComments Comment Widget.

Επιτυχία!

Συγχαρητήρια για τη ρύθμιση των FastComments με το ThriveCart! Αν έχετε αντιμετωπίσει ένα Domain Error, ή θα θέλατε να μάθετε πώς να προσαρμόσετε την περιοχή σχολίων, διαβάστε παρακάτω!

Το FastComments έχει σχεδιαστεί ώστε να προσαρμόζεται για να ταιριάζει στον ιστότοπό σας.

Εάν θέλετε να προσθέσετε προσαρμοσμένο στυλ ή να τροποποιήσετε τη διαμόρφωση, Δείτε την τεκμηρίωση προσαρμογής μας για να μάθετε πώς.