しばらく気になっていたので、試してみることにしました。注意点として、私はShopifyの経験がほとんどありませんが、Discourseのカスタマーサポートの仕事で何度も尋ねられたことです。
ShopifyストアとDiscourseサイトの両方が、匿名（ログインしていない）ユーザーでも表示できるように設定されている場合、DiscourseのコメントをShopifyの商品ページに埋め込むことができます。そのために、Discourseサイトの「管理 / カスタマイズ / 埋め込み」ページの「許可されるホスト」セクションにストアのドメインを追加します。
「トピック作成時のユーザー名」設定に、Discourse Shopifyトピックの作成者として表示されるDiscourseユーザーのユーザー名を追加してください。その後、ページ下部にある「埋め込み設定を保存」ボタンをクリックします。
埋め込みページに表示されている埋め込みコードを、Shopifyの商品ページの「説明」セクションにコピーします。コードを挿入する前に、エディタの「HTMLを表示」ボタンをクリックしてください。
埋め込みコードを編集して、Discourse埋め込みページの「トピック作成時のユーザー名」として入力したユーザー名に DISCOURSE_USERNAME を置き換えます。また、埋め込みコードの EMBED_URL テキストを商品のURLに置き換えます。その後、商品ページを保存します。
なお、Discourseコメントの埋め込みに関する詳細はこちらで確認できます: https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963。
これで、Shopifyの商品ページにDiscourseコメントセクション（iframeとして埋め込まれたもの）が表示されるはずです。エラーがなければ、最初にアクセスしたときに「ディスカッションを読み込み中」と表示される場合があります。これは、ページへのアクセスがDiscourseに商品ページ用のトピックを作成させたためです。数秒後、「ディスカッションを開始」というテキストが表示されるはずです。そのリンクをクリックすると、関連するDiscourseトピックに移動します。
トピックにアクセスして返信すると、その返信はShopifyの商品ページに表示されます。
考えられる問題点：
デフォルトのShopifyテーマの説明セクションは、Discourseコメントセクションを表示するには幅が狭すぎるようです。
これはカスタムShopifyテーマで簡単に修正できると想定しています。
Discourseでは、Shopifyの商品からDiscourseトピックに引き出されるコンテンツをあまり制御できません。私がDiscourseにリンクした商品で確認しているのは次のとおりです。
「全投稿を表示」ボタンをクリックした後：
私が望むのは、商品概要、価格、画像が表示されることです。以下のテキストが表示されることは絶対に避けたいです。
商品バリアント
受け取り可能状況を読み込めませんでした 更新
これは、Discourseの allowed embed selectors サイト設定を調整することで修正できる可能性があります。その設定に関する詳細は次のとおりです。許可される埋め込みセレクター設定を設定する。Discourseには、役立つ可能性のある非表示の blocked embed selectors サイト設定もあります。最近、Discourseの埋め込み設定を構成するのに役立つオンラインデバッガーをセットアップしました。まだ開発途上ですが、試してみたい場合はPMを送ってください。
DiscourseサイトまたはShopifyストアのいずれかが、匿名ユーザーが表示できないように構成されている場合、埋め込みコメントで問題が発生すると予想されます。
以前に公開された多数のShopify商品に手動でDiscourse埋め込みコードを追加するのは面倒かもしれません。Discourse埋め込みコードをすべての商品説明に追加するShopifyアプリを作成することは可能だと想定しています。
もう1つ対処する必要があるのは、埋め込まれたDiscourseコメントのスタイルをShopifyの商品ページのスタイルに合わせることです。これは、デフォルトのDiscourseテーマのテーマエディタの「埋め込みCSS」セクションにCSSを追加することで可能になるはずです。たとえば、これは前のスクリーンショットの背景色の問題を修正します。
