Add Comments to BigCommerce Sites

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

Pour ce faire, allez dans Storefront puis Themes.

Sélectionner la vitrine

Sélectionner 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 puis sur Make a Copy.

Faire 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 explorateur de fichiers à gauche et un éditeur à droite.

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

Dans la navigation de gauche, allez à 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 sur 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 avoir ajouté le code

Nous pouvons maintenant enregistrer le fichier :

Enregistrer

...et quitter l'éditeur :

Modifier 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 appliquer les modifications en direct :

Publier les modifications

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

Modifications en direct

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 ajuster la configuration, Consultez notre documentation de personnalisation pour savoir comment.

Il n'est pas recommandé d'ajouter FastComments via le Page Builder de BigCommerce car le code doit alors ê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 du 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