アプリのサーバサイドで取得したデータをストア上のページ内に埋め込む方法

[y_masaki]

やりたいこと

アプリサーバサイドで外部APIからデータを取得してそれを整形してフロントで表示可能な何らかのデータ形式（HTML、Liquid）に成型し、

ストアの商品詳細ページにウィジェットのような形で部分的に埋め込みたいです。

下記を読んで app proxyが機能としては近いものを提供しているのかと考えたのですが、

You can use an app proxy to fetch data from an app proxy server for display on a page of the online store.

This means that you can use app proxies for dynamic content that needs to be updated regularly.

App proxies are useful for displaying image galleries, statistics, or custom forms. 

設定方法を細かく見るとあくまで1ページ丸々のデータをストア側のURLにマッピングする機能のように思われます。

具体的用途としては、例えばShopify上で販売している商品に関連するオウンドメディアの記事とサムネイル画像のデータをAPIから取得して商品ページの下部に埋め込み表示をしたいといったものになります。

もしくはApp proxyは使わずiflameを（直接テーマに記載するなりScript Tag APIでDOM操作をするJSをバインドするなりで）テーマに埋め込むことで別途ホスティングしたページを表示してくるといった方法になりますでしょうか？

推奨の方法や似た事例などありましたらどなたかお知恵を頂けますと幸いです。

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

[junichiokamura · Accepted solution]

テーマから何かIDのようなもの（ログインしている顧客や表示している商品など）を受け取って都度外部APIからデータを取得して表示するのであれば、App proxyが良いと思います。

App proxyは、丸々１ページを置き換えることも、JSONをレスポンスする、テーマからAjax 通信でよべる内部API的な使い方もできます。

１ページ置き換えは、レスポンスを引用されているようにHTML/Liquidにして、テーマ側で次のリンク先として置き換えると、テーマ内に独自の画面を差し込めます。

外部のDOM操作で実現できるのであれば、ScritTagで、JSを挿入して、そのJS内からApp proxyのURLをAjax通信してレンダリングするのが良いと思います。

なお、バッチ処理であらかじめ取得したデータをフロントに出すのであれば、Metafieldsに格納すれば、テーマでLiquidで取り出せるので、こちらの方が簡単かもしれません。

Iframeはセキュリティに引っかかってしまって思うように動かなかったりするのでお勧めしません。

[y_masaki]

ご返信頂きありがとうございます！

しばらく気が付かず大変失礼いたしました。

App proxyは、丸々１ページを置き換えることも、JSONをレスポンスする、テーマからAjax 通信でよべる内部API的な使い方もできます。

なるほど…確かにそのようにも使えるのですね。

なお、バッチ処理であらかじめ取得したデータをフロントに出すのであれば、Metafieldsに格納すれば、テーマでLiquidで取り出せるので、こちらの方が簡単かもしれません。

こちらに関しては回答待ちの間に思いついて試したところうまくいきました。確かに、こちらの方が実装は簡単かもしれません。

複数解決法をご提示くださりありがとうございます。こちら解決済みとさせていただきます。