Qual a forma mais eficiente de usar Discourse para comentários em posts de blog no Shopify?

[MarximusMG]

Olá a todos!

Pesquisei bastante por aqui sobre esta aplicação específica, mas parece que a maioria das perguntas está relacionada ao uso do Discourse para comentários em posts do WordPress.

Além deste tutorial (Embed Discourse comments on another website via Javascript), alguém pode compartilhar alguma orientação para implementar comentários do Discourse especificamente para posts de blog do Shopify?

Um exemplo do que estou imaginando pode ser visto em como o macrumors.com lida com comentários (ou seja, ao visualizar um artigo, os principais comentários são exibidos abaixo do artigo, e o usuário tem a opção de ver todos os comentários. Após clicar nesse link, o tópico do fórum que é criado como resultado do artigo é carregado).

Agradeço desde já!

[MarximusMG]

[pfaffman (Jay Pfaffman)]

Qual é o problema com o embed de javascript?

[MarximusMG]

Obrigado pela resposta!

Estou implementando isso hoje e entrarei em contato novamente aqui com quaisquer problemas que surgirem - acho que não percebi que a opção de incorporação de javascript funcionava da mesma forma que descrevi acima. Peço desculpas!

[jord8on (Jordan)]

Olá @MarximusMG! Como isso foi para você? Você se importaria de compartilhar sua experiência usando o JS embed? Ou você abandonou essa iniciativa?

[simon]

Tenho pensado nisso há algum tempo, então decidi testar. Observe que tenho pouca experiência com Shopify, mas é algo sobre o qual me perguntaram algumas vezes quando trabalhava no suporte ao cliente para Discourse.

Se tanto a loja Shopify quanto o site Discourse estiverem configurados para que possam ser visualizados por usuários anônimos (não logados), os comentários do Discourse podem ser incorporados na página de produto da Shopify. Para fazer isso, adicione o domínio da sua loja à seção “Allowed Hosts” (Hosts Permitidos) na página Admin / Customize / Embedding (Administrador / Personalizar / Incorporar) do seu site Discourse:

Certifique-se de adicionar o nome de usuário do usuário Discourse que será exibido como autor dos tópicos do Discourse no Shopify à configuração “Username for topic creation” (Nome de usuário para criação de tópico). Em seguida, clique no botão “Save Embedding Settings” (Salvar Configurações de Incorporação) na parte inferior da página.

Copie o código de incorporação exibido na página de Incorporação para a seção “Description” (Descrição) da página de produto da Shopify. Certifique-se de clicar no botão “show html” (mostrar html) no editor antes de inserir o código:

Edite o código de incorporação para substituir DISCOURSE_USERNAME pelo nome de usuário que você inseriu como “Username for topic creation” (Nome de usuário para criação de tópico) na página de Incorporação do Discourse. Substitua também o texto EMBED_URL do código de incorporação pelo URL do produto. Em seguida, salve a página do produto.

Observe que você pode obter mais detalhes sobre a incorporação de comentários do Discourse aqui: Embed Discourse comments on another website via Javascript.

Agora você deverá ver uma seção “Discourse Comments” (Comentários do Discourse) (incorporada como um iframe) na página de produto da Shopify. Assumindo que não haja erros, ela pode exibir o texto “Loading discussion” (Carregando discussão) na primeira vez que você a visitar. O que está acontecendo é que a visita à página acionou o Discourse para criar um tópico para a página do produto. Após alguns segundos, você deverá ver o texto “Start discussion” (Iniciar discussão). Se você clicar nesse link, será levado ao tópico relacionado no Discourse.

Se você visitar o tópico e responder a ele, essa resposta aparecerá na página de produto da Shopify.

Possíveis problemas:
A seção de descrição do tema padrão da Shopify não parece ser larga o suficiente para exibir a seção de comentários do Discourse:

Presumo que isso possa ser facilmente corrigido com um tema personalizado da Shopify.

O Discourse não oferece muito controle sobre o conteúdo que é extraído do produto Shopify para o tópico do Discourse. Veja o que estou vendo para o produto que vinculei ao Discourse:

Após clicar no botão “Show Full Post” (Mostrar Postagem Completa):

O que eu gostaria de ver é a descrição do produto, o preço e a imagem. Eu definitivamente não quero que o seguinte texto seja exibido:

Product variants
Couldn’t load pickup availability Refresh

Pode ser possível corrigir isso mexendo na configuração do site do Discourse allowed embed selectors (seletores de incorporação permitidos). Alguns detalhes sobre essa configuração estão aqui: Configure the Allowed Embed Selectors Setting. O Discourse também tem uma configuração de site oculta blocked embed selectors (seletores de incorporação bloqueados) que pode ser útil. Recentemente, configurei um depurador online para ajudar a configurar as configurações de incorporação do Discourse. É um trabalho em andamento, mas me envie uma mensagem privada se quiser experimentá-lo.

Se o site Discourse ou a loja Shopify estiverem configurados de forma que não possam ser visualizados por usuários anônimos, suspeito que você terá problemas com comentários incorporados.

Ter que adicionar manualmente o código de incorporação do Discourse a um grande número de produtos Shopify publicados anteriormente pode ser um problema. Suspeito que seria possível criar um aplicativo Shopify que anexasse automaticamente o código de incorporação do Discourse a todas as descrições de produtos.

Outra coisa que pode precisar ser tratada é fazer com que os estilos dos comentários incorporados do Discourse correspondam aos estilos da página de produto da Shopify. Deve ser possível fazer isso adicionando algum CSS à seção “Embed CSS” (CSS de Incorporação) do editor de temas do seu tema padrão do Discourse. Por exemplo, isso corrige o problema com a cor de fundo nas minhas capturas de tela anteriores:

[simon]

Percebi que não respondi completamente à pergunta do OP. Aqui está uma abordagem geral que funcionará para páginas de produtos ou posts de blog do Shopify. Na seção Tema / Personalizar da sua loja, vá para o modelo de página ao qual você deseja adicionar comentários do Discourse. Dependendo da página, adicione um bloco de Liquid Personalizado a uma seção ou adicione uma nova seção de Liquid Personalizado. Em seguida, adicione o código de incorporação do Discourse à seção.

Para discourseEmbedUrl do código de incorporação, use location.href. Dessa forma, discourseEmbedUrl será definido automaticamente. Por exemplo:

<div id='discourse-comments'></div>
<meta name='discourse-username' content='DISCOURSE_USERNAME'>

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'DISCOURSE_URL',
    discourseEmbedUrl: location.href,
    // className: 'CLASS_NAME',
  };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
</script>

Para posts de blog do Shopify, você provavelmente precisará adicionar algum CSS personalizado à seção Liquid para manter a seção de comentários centralizada e limitar sua largura. Por exemplo:

div#discourse-comments {
  max-width: 726px;
  margin: 0 auto;
}

Com posts de blog, em oposição a páginas de produtos, estou descobrindo que o Discourse faz um bom trabalho ao extrair o conteúdo apropriado para o tópico: