Liquid、JavaScriptなどに関する質問
はじめまして。ミウラタクヤ商店の三浦と申します。
当店でMILというインタラクティブ動画配信サービスの導入を検討しております。
動画内にリンクを設定できるというサービスです。
(動画内のボタンをクリックすると商品がポップアップされる。)
設定の流れとしてはMILの管理画面で動画のiframeを発行し
Shopifyの管理画面でサイトに埋め込むという流れになります。
Shopifyだとポップアップされません
楽天や他のECサイトに埋め込むと問題なくポップアップが
発生するのですがShopifyの場合ホワイトアウトして適切にポップアップが表示されません。
Shopify側でなにかポップアップの規制などがあるのでしょうか?
もしAPIだったり対策などありましたらご教授いただければ幸いでございます。
よろしくお願い致します。
解決済! ベストソリューションを見る。
成功
ご返信ありがとうございます。
ページについてはこちらになります。
https://miuratakuya.store/pages/miltest
また要素の検証でのconsole画面はこちらになります。
ブラウザでアラートが出ております。
なお
YOUTUBEやGoogleMapはポップアップされShopifyは表示されません。
MIL動画上にポップアップしたらshopifyサイトを表示したいのですが、
どうすれば宜しいでしょうか?
テーマはdebutになります。
現象が発生している時に、ブラウザコンソールにエラーやアラートは出ていませんでしょうか?
画面で右クリックで「要素の検証」などのメニューで開発ツールが表示されるので、そのコンソールタブの内容を共有いただければと思います。
テーマに依存する問題かもしれませんので、お使いのテーマも教えていただければと思います。
成功
ご返信ありがとうございます。
ページについてはこちらになります。
https://miuratakuya.store/pages/miltest
また要素の検証でのconsole画面はこちらになります。
ブラウザでアラートが出ております。
なお
YOUTUBEやGoogleMapはポップアップされShopifyは表示されません。
MIL動画上にポップアップしたらshopifyサイトを表示したいのですが、
どうすれば宜しいでしょうか?
テーマはdebutになります。
情報のご提供ありがとうございます。
状況がわかりました。結論から言うと、Shopifyのストアフロントは、frameからの呼び出しを禁止するために、X-Frame-Options=DENYをヘッダーとして送っているので、frame内からリンクさせるのは仕様的にできません。
この事象の解説と対応策が英語のコミュニティにあったのでご確認ください。
https://community.shopify.com/c/Shopify-APIs-SDKs/X-FRAME/td-p/598332
Shopifyのテーマ(フレーム)>動画サービス の埋め込みはOKですが、この動作しないボタンに関しては、
動画サービス(フレーム)>Shopify の埋め込みになっているのでNGとなっております。
試しにフレームを外して単独で表示しましたが、ソースをみるとボタン自体がフレームで実装されているようです。
http://interactive.mil.movie/whdUYZ/
上記のフォーラムに解決策として書いてあるのは、Shopifyのショップを直接リンクするのではなく、storefront APIを使って、独自にショップの情報を表示することかと思います。
以下の「テーマを使わない外部ストアフロントの構築」の部分にそのアプローチの情報が載っているのでご参照いただけますか?
https://www.shopify.jp/blog/partner-shopify-app-development
ご丁寧にありがとうございます!
承知しました。こちらで1度確認させていただきます!
ありがとうございます。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024