FROM CACHE - jp_header
解決済

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

ミウラタクヤ商店
Shopify Partner
4 1 1

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

 

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

 

MILサービスについて

 

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

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

 

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

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

 

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

 

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

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

 

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

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

 

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

hello@miuratakuya.store
twitter:@miutakustore
1 件の受理された解決策
ミウラタクヤ商店
Shopify Partner
4 1 1

成功

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

 

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

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

元の投稿で解決策を見る

4件の返信4

junichiokamura
Community Manager
1200 280 506

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

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

Senior Partner Solutions Engineer
ミウラタクヤ商店
Shopify Partner
4 1 1

成功

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

 

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

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
junichiokamura
Community Manager
1200 280 506

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

 

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

 

 

Senior Partner Solutions Engineer
ミウラタクヤ商店
Shopify Partner
4 1 1

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

 

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

ありがとうございます。

hello@miuratakuya.store
twitter:@miutakustore