Add Comments to BigCommerce Sites

Per prima cosa, creiamo un tema personalizzato che modificheremo. Se hai già impostato un tema personalizzato, puoi saltare questo passaggio.

Per farlo, andremo su Storefront e poi su Themes.

Seleziona Storefront

Seleziona Themes

Ai fini di questo tutorial useremo il tema predefinito, ma le istruzioni sono le stesse per tutti i temi.

Successivamente, non faremo clic su Customize. Invece, fai clic su Advanced e Make a Copy.

Crea una Copia

Conferma la copia del tema:

Salva la copia

Al termine, dovresti vedere il tuo tema elencato sotto Themes nella parte inferiore della pagina, come mostrato.

Tema personalizzato creato

Ora possiamo modificare il nuovo tema per aggiungere FastComments.

Modifica i file del tema

Il passo successivo sarà aggiungere il codice del widget che rende possibile l'integrazione.

Una volta che sei nell'editor del tema, come indicato nel passaggio precedente, vedrai un browser di file a sinistra e un editor a destra.

Quello che faremo è modificare un template che rappresenta le pagine dei post del nostro blog.

Nella navigazione a sinistra, vai su templates->pages->blog-post.html.

Apri il template

Successivamente, copia il codice che useremo per installare 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

Ora incolleremo il codice del widget su Line 6. È importante che il codice venga aggiunto prima della riga con {{/partial}}.

Incolla alla riga 6

Dovresti ottenere qualcosa del genere:

Dopo aver aggiunto il codice

Ora possiamo salvare il file:

Salva

...e uscire dall'editor:

Modifica l'editor

Il nostro ultimo passo è utilizzare il nuovo template del tema.

In alto a destra vedrai ora o Publish o Make Active Theme. Clicca su quello per continuare e rendere le modifiche effettive:

Pubblica le modifiche

Ora possiamo dare un'occhiata al nostro sito! Se vai su un post del blog, dovresti vedere una casella dei commenti in fondo.

Modifiche pubblicate

Bel lavoro! Hai aggiunto i commenti in tempo reale al tuo sito BigCommerce.

Se hai riscontrato un errore di permesso negato, o desideri personalizzare FastComments, continua a leggere.

FastComments è progettato per essere personalizzato in modo da adattarsi al tuo sito.

Se desideri aggiungere stili personalizzati, o modificare la configurazione, Consulta la nostra documentazione sulle personalizzazioni per scoprire come.

Non è consigliato aggiungere FastComments tramite il Page Builder di BigCommerce, perché il codice dovrà poi essere aggiunto manualmente a ogni pagina desiderata.

Tuttavia, se si desidera procedere in questo modo, è necessario utilizzare lo snippet di codice seguente. Gli snippet di codice di altri tutorial non funzioneranno a causa della natura di BigCommerce:

Snippet per il Page Builder di 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