shopify themeで開発したアプリがあります。
商品の定期配送プラグインが相性悪く、うまいことレンダリングされません。
(プラグインではwindow.onloadでproduct-fromというクラスの前にレンダリングされるのですが、window.onloadそれより後で商品をレンダリングされるため。)
そこで、htmlの中で商品をiframeで表示しようと考えて、実装してみました。
ここでなぜかiframe内が読み込まれませんでした。
以下のようなhttpヘッダーを設定する必要があるのですが、shopifyではヘッダーの編集ができないと伺いました。
Content-Security-Policy: frame-ancestors 'self';
shopifyでhttpヘッダーは編集できないでしょうか？
編集する方法があればご教示いただけないでしょうか？
ご質問に関する直接の回答ではないですが、おそらくiframeで表示して解決する問題ではないと思います。
どういうことを実現されたいのかわかっていない点があるので、認識違いであればすみません。
ご返信ありがとうございます。
実は、何かコメントや動画を表示して、関連している商品を表示しようとしています。
その中にモーダル(ダイアログの方がイメージ近いかも)の中に商品の画像や情報・注文ボタンを表示しようと考えています。
以前は商品をajax api(/products/商品a.jsonのような感じ)で取得して、レンダリングしていました。もちろん、この方法はプラグインがうまく動作してくれません。
商品ページであれば、このプラグインが作動してくれるため、この方法を取ろうと考えています。ページを表示するならiframeと考えてこの方法を試しました。
ちなみに、ヘッダーとかをうまいこと削除してモーダルの中身のみ表示するようにthemeはいじってあります。
何か参考になる情報があれば、ご連絡いただけると幸いです。
詳細ありがとうございます。
たしかにiframeで表示できたらよさそうですが、Shopifyはiframe内で表示されないように制御していますので難しいと思います。(そのためのContent-Security-Policyヘッダーですので)
モーダル内に商品ページのコンテンツを表示したい場合、Section Rendering APIを使って商品ページ内の特定のセクションを取得し、表示することで対応できるかもしれません。
https://shopify.dev/docs/api/section-rendering
ただし、該当の定期配送プラグインがそのセクション内に含まれている(ソースコードまたはアプリブロックなどがセクション内にある)ことが前提です。