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 :
