Quelle est la manière la plus efficace d'utiliser Discourse pour les commentaires sur les articles de blog Shopify ?

Dev
1

Salut à tous !

J’ai fait quelques recherches ici sur cette application spécifique, mais il semble que la plupart des questions concernent l’utilisation de Discourse pour les commentaires sur les articles Wordpress.

Outre ce tutoriel (Embed Discourse comments on another website via Javascript), quelqu’un peut-il partager des conseils pour implémenter les commentaires Discourse spécifiquement pour les articles de blog Shopify ?

Un exemple de ce que j’imagine peut être vu dans la façon dont macrumors.com gère les commentaires (c’est-à-dire, lors de la visualisation d’un article, les meilleurs commentaires sont affichés sous l’article, et l’utilisateur a la possibilité de voir tous les commentaires. Après avoir cliqué sur ce lien, le sujet du forum créé en conséquence de l’article est chargé).

Merci d’avance !

3 « J'aime »
2

The Lion King Help GIF
:laughing:

1 « J'aime »
3

Quel est le problème avec l’intégration javascript ?

3 « J'aime »
4

Merci pour votre réponse !

Je vais implémenter cela aujourd’hui et je reviendrai ici si des problèmes surviennent - Je suppose que je ne réalisais pas que l’option d’intégration javascript fonctionnait de la même manière que je l’ai décrite ci-dessus. Mes excuses ! :slight_smile:

5 « J'aime »
5

Salut @MarximusMG ! Comment cela s’est-il passé pour toi ? Pourrais-tu partager ton expérience avec l’intégration JS ? Ou as-tu abandonné cette initiative ?

6

Je me pose cette question depuis un moment, alors j’ai décidé de tester. Notez que j’ai très peu d’expérience avec Shopify, mais c’est quelque chose qui m’a été demandé assez souvent lorsque je travaillais au support client pour Discourse.

Si la boutique Shopify et le site Discourse sont configurés de manière à pouvoir être consultés par des utilisateurs anonymes (non connectés), les commentaires Discourse peuvent être intégrés à une page de produit Shopify. Pour ce faire, ajoutez le domaine de votre boutique à la section Hôtes autorisés de la page Admin / Personnaliser / Intégration de votre site Discourse :

image
image1536×1175 150 KB

Assurez-vous d’ajouter le nom d’utilisateur de l’utilisateur Discourse qui sera affiché comme auteur des sujets Discourse Shopify au paramètre « Nom d’utilisateur pour la création de sujets ». Cliquez ensuite sur le bouton « Enregistrer les paramètres d’intégration » en bas de la page.

Copiez le code d’intégration affiché sur la page d’intégration dans la section « Description » de la page de produit Shopify. Assurez-vous de cliquer sur le bouton « afficher le html » dans l’éditeur avant d’insérer le code :

image
image1170×758 161 KB

Modifiez le code d’intégration pour remplacer DISCOURSE_USERNAME par le nom d’utilisateur que vous avez entré comme « Nom d’utilisateur pour la création de sujets » sur la page d’intégration Discourse. Remplacez également le texte EMBED_URL du code d’intégration par l’URL du produit. Enregistrez ensuite la page produit.

Notez que vous pouvez obtenir plus de détails sur l’intégration des commentaires Discourse ici : Embed Discourse comments on another website via Javascript.

Vous devriez maintenant voir une section Commentaires Discourse (intégrée sous forme d’iframe) sur la page produit Shopify. En supposant qu’il n’y ait pas d’erreurs, elle peut afficher le texte « Chargement de la discussion » la première fois que vous la visitez. Ce qui se passe, c’est que la visite de la page a déclenché Discourse pour créer un sujet pour la page produit. Après quelques secondes, vous devriez voir le texte « Démarrer la discussion ». Si vous cliquez sur ce lien, vous serez dirigé vers le sujet Discourse associé.

Si vous visitez le sujet et y répondez, cette réponse apparaîtra sur la page produit Shopify.

Problèmes possibles :
La section description du thème Shopify par défaut ne semble pas assez large pour afficher la section des commentaires Discourse :

image
image1344×902 73 KB

Je suppose que cela peut être facilement résolu avec un thème Shopify personnalisé.

Discourse ne vous donne pas beaucoup de contrôle sur le contenu qui est extrait de la page produit Shopify vers le sujet Discourse. Voici ce que je vois pour le produit que j’ai lié à Discourse :

image
image1410×448 53.5 KB

Après avoir cliqué sur le bouton « Afficher le message complet » :

image
image1471×637 72.5 KB

Ce que j’aimerais voir, c’est la description du produit, le prix et l’image. Je ne veux absolument pas que le texte suivant soit affiché :

Variantes du produit
Impossible de charger la disponibilité du retrait Actualiser

Il est peut-être possible de résoudre ce problème en jouant avec le paramètre du site Discourse allowed embed selectors. Vous trouverez des détails sur ce paramètre ici : Configurer le paramètre des sélecteurs d’intégration autorisés. Discourse dispose également d’un paramètre de site caché blocked embed selectors qui pourrait être utile. J’ai récemment configuré un débogueur en ligne pour aider à configurer les paramètres d’intégration de Discourse. C’est un travail en cours, mais envoyez-moi un message privé si vous souhaitez l’essayer.

Si le site Discourse ou la boutique Shopify sont configurés de manière à ne pas pouvoir être consultés par des utilisateurs anonymes, je suspecte que vous rencontrerez des problèmes avec les commentaires intégrés.

Le fait de devoir ajouter manuellement le code d’intégration Discourse à un grand nombre de produits Shopify précédemment publiés pourrait être fastidieux. Je suppose qu’il serait possible de créer une application Shopify qui ajouterait automatiquement le code d’intégration Discourse à toutes les descriptions de produits.

Une autre chose qui pourrait nécessiter une attention particulière est de faire correspondre les styles des commentaires Discourse intégrés aux styles de la page produit Shopify. Cela devrait être possible en ajoutant du CSS à la section CSS d’intégration de l’éditeur de thème de votre thème Discourse par défaut. Par exemple, cela résout le problème de la couleur de fond dans mes captures d’écran précédentes :

image
image1194×437 41.6 KB

image
image1477×931 73.6 KB

1 « J'aime »
7

J’ai réalisé que je n’avais pas tout à fait répondu à la question de l’OP. Voici une approche générale qui fonctionnera pour les pages de produits ou les articles de blog Shopify. Dans la section Thème / Personnaliser de votre boutique, accédez au modèle de page auquel vous souhaitez ajouter des commentaires Discourse. Selon la page, ajoutez un bloc Liquid personnalisé à une section, ou ajoutez une nouvelle section Liquid personnalisée. Ensuite, ajoutez le code d’intégration Discourse à la section.

Pour discourseEmbedUrl du code d’intégration, utilisez location.href. De cette façon, discourseEmbedUrl sera automatiquement défini. Par exemple :

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

Pour les articles de blog Shopify, vous devrez probablement ajouter du CSS personnalisé à la section Liquid pour que la section des commentaires reste centrée et limite sa largeur. Par exemple :

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

Avec les articles de blog, par opposition aux pages de produits, je constate que Discourse fait un bon travail pour extraire le contenu approprié dans le sujet :

image
image1061×1151 150 KB

3 « J'aime »