Add Comments to BigCommerce Sites

Primero, vamos a crear un tema personalizado que vamos a editar. Si ya tiene un tema personalizado configurado, puede omitir este paso.

Para ello, iremos a Storefront y luego a Themes.

Seleccionar Storefront

Seleccionar Themes

Para los propósitos de este tutorial usaremos el tema predeterminado, pero las instrucciones son las mismas para todos los temas.

A continuación, no haremos clic en Personalizar. En su lugar, haga clic en Advanced y Make a Copy.

Hacer una copia

Confirme la copia del tema:

Guardar la copia

Una vez completado, debería ver su tema listado bajo Themes en la parte inferior de la página, de esta manera.

Tema personalizado creado

Ahora podemos editar nuestro nuevo tema para agregar FastComments.

Editar archivos del tema

El siguiente paso será añadir el código del widget que hace que la integración funcione.

Una vez que estés en el editor de temas, según las instrucciones del paso anterior, verás un explorador de archivos a la izquierda y un editor a la derecha.

Lo que vamos a hacer es editar una plantilla que representa nuestras páginas de entradas del blog.

En la navegación de la izquierda, ve a templates->pages->blog-post.html.

Abrir la plantilla

A continuación, copie el código que usaremos para instalar 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

Ahora vamos a pegar el código del widget en Line 6. Es importante que el código se agregue antes de la línea con {{/partial}}.

Pegar en la línea 6

Debería obtener algo como esto:

Después de agregar el código

Ahora podemos guardar el archivo:

Guardar

...y salir del editor:

Editar el editor

Nuestro último paso es usar la nueva plantilla de tema.

En la esquina superior derecha, ahora verás Publish o Make Active Theme. Haz clic ahí para continuar y publicar los cambios:

Publicar los cambios

Ahora podemos ver nuestro sitio. Si vas a una entrada del blog, deberías ver un cuadro de comentarios en la parte inferior.

Cambios publicados

¡Buen trabajo! Has añadido comentarios en vivo a tu sitio de BigCommerce.

Si te has encontrado con un error de permiso denegado, o deseas personalizar FastComments, sigue leyendo.

FastComments está diseñado para personalizarse y adaptarse a su sitio.

Si desea añadir estilos personalizados o ajustar la configuración, Consulte nuestra Documentación de personalización para aprender cómo.

No se recomienda añadir FastComments mediante el Page Builder de BigCommerce, ya que entonces el código debe agregarse manualmente en cada página deseada.

Sin embargo, si esto es lo que desea, debe utilizarse el siguiente fragmento de código. Los fragmentos de código de otros tutoriales no funcionarán debido a la naturaleza de BigCommerce:

Fragmento del 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