Add Comments to BigCommerce Sites

Premièrement, créons un thème personnalisé que nous allons modifier. Si vous avez déjà un thème personnalisé configuré, vous pouvez passer cette étape.

Pour ce faire, allez dans Storefront puis Themes.

Sélectionnez la vitrine

Sélectionnez les thèmes

Pour les besoins de ce tutoriel, nous utiliserons le thème par défaut, mais les instructions sont les mêmes pour tous les thèmes.

Ensuite, nous n'allons pas cliquer sur Personnaliser. Cliquez plutôt sur Advanced et Make a Copy.

Créer une copie

Confirmez la copie du thème :

Enregistrer la copie

Une fois terminé, vous devriez voir votre thème répertorié sous Themes en bas de la page, comme ceci.

Thème personnalisé créé

Nous pouvons maintenant modifier notre nouveau thème pour ajouter FastComments.

Modifier les fichiers du thème

L'étape suivante consiste à ajouter le code du widget qui permet à l'intégration de fonctionner.

Une fois dans l'éditeur de thème, comme indiqué à l'étape précédente, vous verrez un navigateur de fichiers à gauche et un éditeur à droite.

Ce que nous allons faire, c'est modifier un modèle qui représente nos pages d'articles de blog.

Dans la navigation à gauche, accédez à templates->pages->blog-post.html.

Ouvrir le modèle

Ensuite, copiez le code que nous utiliserons pour installer 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

Nous allons maintenant coller le code du widget à Line 6. Il est important que le code soit ajouté avant la ligne contenant {{/partial}}.

Coller à la ligne 6

Vous devriez obtenir quelque chose comme ceci :

Après l'ajout du code

Nous pouvons maintenant enregistrer le fichier :

Enregistrer

...et quitter l'éditeur :

Quitter l'éditeur

Notre dernière étape consiste à utiliser le nouveau modèle de thème.

En haut à droite, vous verrez maintenant soit Publish soit Make Active Theme. Cliquez dessus pour continuer et mettre les modifications en ligne :

Publier les modifications

Nous pouvons maintenant vérifier notre site ! Si vous allez sur un article de blog, vous devriez voir une boîte de commentaires en bas.

Modifications en ligne

Bravo ! Vous avez ajouté des commentaires en direct à votre site BigCommerce.

Si vous avez rencontré une erreur « permission denied », ou si vous souhaitez personnaliser FastComments, lisez la suite.

FastComments est conçu pour être personnalisé afin de s'adapter à votre site.

Si vous souhaitez ajouter des styles personnalisés, ou modifier la configuration, Consultez notre documentation sur les personnalisations et la configuration pour savoir comment.

Il n'est pas recommandé d'ajouter FastComments via le Page Builder de BigCommerce, car le code doit ensuite être ajouté manuellement à chaque page souhaitée.

Cependant, si cela est souhaité, l'extrait de code suivant doit être utilisé. Les extraits de code provenant d'autres tutoriels ne fonctionneront pas en raison de la nature de BigCommerce :

Extrait pour le Page Builder de 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