Add Comments to BigCommerce Sites

First, let's create a custom theme that we're going to edit. If you already have a custom theme setup, you can skip this step.

To do this, we will go to Storefront and then Themes.

Επιλέξτε Storefront

Επιλέξτε Themes

For the purposes of this tutorial we will use the default theme, but the instructions are the same for all themes.

Next, we are not going to click Customize. Instead, click Advanced and Make a Copy.

Make a Copy

Confirm copying the theme:

Save The Copy

Once complete, you should see your theme listed under Themes on the bottom of the page, like so.

Custom Theme Created

Now we can edit our new theme to add FastComments.

Επεξεργασία αρχείων θέματος

Το επόμενο βήμα είναι να προσθέσουμε τον κώδικα του widget που κάνει την ενσωμάτωση να λειτουργεί.

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

Αυτό που πρόκειται να κάνουμε είναι να επεξεργαστούμε ένα πρότυπο που αντιπροσωπεύει τις σελίδες των δημοσιεύσεων του ιστολογίου μας.

Στην αριστερή πλοήγηση, μεταβείτε στο templates->pages->blog-post.html.

Άνοιγμα του προτύπου

Στη συνέχεια, αντιγράψτε τον κώδικα που θα χρησιμοποιήσουμε για την εγκατάσταση του FastComments:

BigCommerce Comments Code

Copy

1

2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5window.fcConfigs = [{

6 "tenantId": "demo"

7}];

8</script>

9

Τώρα πρόκειται να επικολλήσουμε τον κώδικα του widget στη Line 6. Είναι σημαντικό ο κώδικας να προστεθεί πριν τη γραμμή με {{/partial}}.

Επικόλληση στη Γραμμή 6

Θα πρέπει να έχετε κάτι σαν το παρακάτω:

Μετά την προσθήκη του κώδικα

Τώρα μπορούμε να αποθηκεύσουμε το αρχείο:

Αποθήκευση

...και έξοδος από τον επεξεργαστή:

Επεξεργασία του Επεξεργαστή

Το τελευταίο μας βήμα είναι να χρησιμοποιήσουμε το νέο πρότυπο θέματος.

Στο πάνω δεξιά μέρος, τώρα θα δείτε είτε Publish είτε Make Active Theme. Κάντε κλικ σε αυτό για να συνεχίσετε και να δημοσιεύσετε τις αλλαγές:

Δημοσίευση των αλλαγών

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

Αλλαγές σε πραγματικό χρόνο

Καλή δουλειά! Έχετε προσθέσει σχόλια σε πραγματικό χρόνο στον ιστότοπό σας στο BigCommerce.

Αν αντιμετωπίζετε σφάλμα "permission denied" ή θέλετε να προσαρμόσετε το FastComments, διαβάστε παρακάτω.

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

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

Δεν συνιστάται να προσθέσετε το FastComments μέσω του Page Builder του BigCommerce, διότι τότε ο κώδικας πρέπει να προστεθεί χειροκίνητα σε κάθε σελίδα που θέλετε.

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

Απόσπασμα για το Page Builder του BigCommerce

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 loaded = false;

7 function attemptLoad() {

8 if (loaded) {

9 return;

10 }

11 if (!window.FastCommentsUI) {

12 return;

13 }

14 FastCommentsUI(document.getElementById('fastcomments-widget'), {

15 tenantId: "demo"

16 });

17 loaded = true;

18 }

19 attemptLoad();

20 const interval = setInterval(function () {

21 attemptLoad();

22 if (loaded) {

23 clearInterval(interval);

24 }

25 }, 300);

26 })();

27</script>

28