Add Comments to BigCommerce Sites

Primeiro, vamos criar um tema personalizado que iremos editar. Se você já tem um tema personalizado configurado, pode pular esta etapa.

Para isso, iremos para Storefront e depois Themes.

Selecione Storefront

Selecione Themes

Para os fins deste tutorial, usaremos o tema padrão, mas as instruções são as mesmas para todos os temas.

Em seguida, não vamos clicar em Personalizar. Em vez disso, clique em Advanced e Make a Copy.

Fazer uma Cópia

Confirme a cópia do tema:

Salvar a Cópia

Uma vez concluído, você deverá ver seu tema listado em Themes na parte inferior da página, assim.

Tema Personalizado Criado

Agora podemos editar nosso novo tema para adicionar o FastComments.

Editar Arquivos do Tema

O próximo passo será adicionar o código do widget que faz a integração funcionar.

Assim que estiver no editor de tema, conforme indicado no passo anterior, você verá um navegador de arquivos à esquerda e um editor à direita.

O que vamos fazer é editar um modelo que representa as páginas de postagem do blog.

In the left-hand navigation, go to templates->pages->blog-post.html.

Abrir o modelo

Em seguida, copie o código que usaremos para instalar o 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

Agora vamos colar o código do widget na Line 6. É importante que o código seja adicionado antes da linha com {{/partial}}.

Cole na Line 6

Você deve terminar com algo assim:

Depois de adicionar o código

Agora podemos salvar o arquivo:

Salvar

...e sair do editor:

Editar o Editor

Nosso último passo é usar o novo modelo de tema.

No canto superior direito, você verá agora ou Publish ou Make Active Theme. Clique nisso para continuar e aplicar as alterações ao vivo:

Publicar as Alterações

Agora podemos verificar nosso site! Se você acessar uma postagem do blog, deverá ver uma caixa de comentários na parte inferior.

Alterações no Ar

Bom trabalho! Você adicionou comentários em tempo real ao seu site do BigCommerce.

Se você encontrou um erro de permissão negada, ou gostaria de personalizar o FastComments, continue lendo.

O FastComments foi projetado para ser personalizado para combinar com o seu site.

Se você quiser adicionar estilos personalizados, ou ajustar a configuração, Consulte nossa Documentação de Customização para aprender como.

Não é recomendável adicionar o FastComments via o Page Builder do BigCommerce, pois o código teria que ser adicionado manualmente em cada página desejada.

No entanto, se isso for desejado, o trecho de código a seguir deve ser usado. Trechos de código de outros tutoriais não funcionarão devido à natureza do BigCommerce:

Trecho do Page Builder do 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