Shopify Appを開発しています。
Appでストアのフロント画面に動的に要素を追加したく、ScriptTagを使って開発を進めておりましたが、
審査においてScriptTagは使わずTheme App Extensionsを使ってほしいというフィードバックを受け取りました。
(この点は私の確認不足でありました)
そこで、以下を質問したいです。
-
Theme App Extensions の「App Block」において、assetsにJavaScriptファイルを指定できるが、ここで動的に生成したHTML要素をストアフロントに挿入することはできるか
-
この生成をReactで行えると嬉しいが、それは可能か
-
Shopify Hydrogenという技術でReactを用いてストアフロントを構築できるようだが、これはShopify App(Theme App Extensions)で使うことは想定されていないか
調べたところ、動的に生成してもストアのカスタマイズ画面で反映されないという声もありました。
その場合、審査の基準に満たないなどあるかなと思っています。
https://stackoverflow.com/questions/70297029/do-theme-app-extensions-need-to-be-built-in-liquid
手元でも検証しようと思いますが、何かご存知な点がありましたら
ご教示いただけると幸いです。よろしくお願いします。
App block は、以下のように、Online Store 2.0のテーマ（Liquid）の構成を取る必要があるので、Reactをそのまま使うことはできません。Hydrogenは、テーマを使わず、Shopifyの外でフロントを作る技術なので、Theme app extensionsには使えません。
https://shopify.dev/apps/online-store/theme-app-extensions/extensions-framework
サーバーサイドの処理をテーマに反映させる仕組みとしては、app proxies があるので、theme app extesnsionsの中のLiquidのコードからajaxでproxyにアクセスして、そのレスポンスを表示させることは可能です。
https://shopify.dev/apps/online-store/app-proxies
Theme app extensionsや、app proxiesについては、以下の動画でも取り上げていますので、ご参照ください。
https://www.youtube.com/watch?v=Ag4cVzzj_bc&list=PLkR3LRtxAZfqujVTfvuHGpNgVTdbrwJRK&index=14
https://www.youtube.com/watch?v=w31mCsEWGhQ&list=PLkR3LRtxAZfqujVTfvuHGpNgVTdbrwJRK&index=12
1 Like
ご回答ありがとうございます。
App Proxy、動画も拝見いたしました。
ご質問なのですが、テーマに埋め込みをしたいストアのページが「商品詳細ページ」でして、
https://{ドメイン}.myshopify.com/products/{商品名} のようなパスを自社サーバーサイドに転送してレスポンスをLiquidで返したいと思っています。
このような動的なパスに対してApp Proxyを設定することは可能でしょうか？
追記:
少し理解しました。
-
マーチャントがTheme app extensionsで 「商品詳細ページ」にApp blocksを配置する
-
「商品詳細ページ」にアクセスすると配置したApp blocksが動作し、アプリ内の特定のパスにajaxでアクセスする
-
そのアクセスをApp Proxyで自社サーバーに転送する
-
レスポンスがLiquidで返され、それを表示する
このような流れでしょうか？
はい、そのご理解で良いかと思います。
- レスポンスがLiquidで返され、それを表示する
App block内のLiquidでJSを使って表示することになります。サーバーサイドでReactでレンダリングして、その結果がAjaxとしてHTMLのDOMで返されて、それを描画するような実装になるかと思います。
サーバーサイドでReactでレンダリングして、その結果がAjaxとしてHTMLのDOMで返される
たしかにこちらの方法で、描画にReactを用いたまま実装ができそうです。
大変助かりました、ありがとうございます。
追加のご質問、失礼いたします。
現在実装したScriptTagについて、ONLINE_STOREスコープのものと、ORDER_STATUSスコープ(チェックアウト完了・注文状況ページで動作)のものをそれぞれ作成していまして、
前者についてはアプリブロックの挿入でカバーできそうですが、後者のチェックアウト完了・注文状況ページについてはエディタからアプリブロックを挿入できないように見えます。
ScriptTagはORDER_STATUSスコープのものであっても今後は使用できないのでしょうか？
その場合、代替の方法はあるでしょうか？(post-purchase extensionsでは実現が難しい機能をScriptTagで実装しておりました。)
よろしくお願いします。
上記、自己解決いたしました。
審査の方より以下の返信があり、注文状況ページではScriptTagの使用が許可されているようでした。
Theme app extension is more applicable as the Script Tag API is more commonly used by apps that interact with the Order confirmation page (also known as, Thank you page).
1 Like