MILという動画サービスをShopifyのサイトで活用したい

解決済
Highlighted

はじめまして。ミウラタクヤ商店の三浦と申します。

 

当店でMILというインタラクティブ動画配信サービスの導入を検討しております。

 

MILサービスについて

 

動画内にリンクを設定できるというサービスです。

(動画内のボタンをクリックすると商品がポップアップされる。)

 

設定の流れとしてはMILの管理画面で動画のiframeを発行し

Shopifyの管理画面でサイトに埋め込むという流れになります。

 

Shopifyだとポップアップされません

 

楽天や他のECサイトに埋め込むと問題なくポップアップが

発生するのですがShopifyの場合ホワイトアウトして適切にポップアップが表示されません。

 

Shopify側でなにかポップアップの規制などがあるのでしょうか?

もしAPIだったり対策などありましたらご教授いただければ幸いでございます。

 

よろしくお願い致します。

hello@miuratakuya.store
twitter:@miutakustore
0 件の「いいね!」
Highlighted
Community Manager
Community Manager
399 84 130

現象が発生している時に、ブラウザコンソールにエラーやアラートは出ていませんでしょうか?

画面で右クリックで「要素の検証」などのメニューで開発ツールが表示されるので、そのコンソールタブの内容を共有いただければと思います。
テーマに依存する問題かもしれませんので、お使いのテーマも教えていただければと思います。

Technical Partner Manager, Japan
0 件の「いいね!」
Highlighted

成功

ご返信ありがとうございます。

 

ページについてはこちらになります。

https://miuratakuya.store/pages/miltest

 

また要素の検証でのconsole画面はこちらになります。

ブラウザでアラートが出ております。

 

なお

YOUTUBEGoogleMapはポップアップされShopifyは表示されません。

MIL動画上にポップアップしたらshopifyサイトを表示したいのですが、

どうすれば宜しいでしょうか?

 

テーマはdebutになります。スクリーンショット 2020-05-28 12.37.58.pngスクリーンショット 2020-05-28 12.38.03.png

hello@miuratakuya.store
twitter:@miutakustore
0 件の「いいね!」
Highlighted
Community Manager
Community Manager
399 84 130

情報のご提供ありがとうございます。

 

状況がわかりました。結論から言うと、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

 

 

Technical Partner Manager, Japan
0 件の「いいね!」
Highlighted

ご丁寧にありがとうございます!

 

承知しました。こちらで1度確認させていただきます!

ありがとうございます。

hello@miuratakuya.store
twitter:@miutakustore
1 件の「いいね!」