Add Comments to ThriveCart Learn+ Courses

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

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

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

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

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

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

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

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

Τώρα ας αντιγράψουμε το ThriveCart-Learn-Specific 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. Θα πρέπει να φαίνεται έτσι:

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

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

Δημοσίευση

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

Σημείωση Δοκιμών!

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

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

Επιτυχία!

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

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

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