JSONデータの取得とストアへの反映方法

[akito]

初めまして。アプリ開発について質問があります。

【やりたいこと】

1.ストアの価格と割引価格のデータを取得して差額を計算するログラムを作りたい。

2.その計算結果をscript tag APIを使用してストアフロントに反映させたい。

【知りたいこと】

1.どのように価格と割引価格のデータを取得すればいいのか。

→仮説　GraphQLとApolloを使う？？？

2.データをVScode上で使えるようにするためにはどのようなコードを書けばいいのか。

→仮説　JSONデータと変数ななどを使う？？？

GitHubのURLを添付するのでファイル名などと一緒に説明してくれると嬉しい。

https://github.com/aki-tech/main-discount-app

よろしくお願いします。

[Takuma]

値引き金額を表示するならShopify単体の標準機能で実現できます。

商品情報はSections/product-template.liquid で表示されていて、

variant.compare_at_price →定価（値引前価格）

variant.price →値引き後売価

をLiquid内で差し引き計算すれば値引き額を表示できます。

全てのテーマを確認してませんが、Supplyテーマでは標準で割引額を表示します。

■コード例

■商品情報の設定例

意図してるものと違ったらすみません。

[junichiokamura]

機能的には、上記の方がおっしゃってるとおりに、テーマの標準機能で可能です。

> どのように価格と割引価格のデータを取得すればいいのか。

APIで両方の価格を取得できます。GraphQLだと以下です。ApolloはNode.jsのGraphQLライブラリなので、共有いただいているCLIで作成したコードの場合は、そのライブラリ経由でGraphQLを呼ぶ必要があります。

GraphQLの場合は、以下のpresentmentPricesで取得できます。
https://shopify.dev/docs/admin-api/graphql/reference/products-and-collections/productvariant#present...

注意点として、APIでは、バリエーションがない商品も、1つのVariantとして参照されるので、ProductVariantの方に詳細データが含まれます。

> データをVScode上で使えるようにするためにはどのようなコードを書けばいいのか。

こちらは、具体的にVSCoddeでどうされたいとうことでしょうか？例えば取得したデータをログに出してVSCodexで表示したいのか、画面に表示する方法なのか、など。

[akito]

回答頂きありがとうございます。

参考にさせていただきます。

> データをVScode上で使えるようにするためにはどのようなコードを書けばいいのか。

こちらは、具体的にVSCoddeでどうされたいとうことでしょうか？例えば取得したデータをログに出してVSCodexで表示したいのか、画面に表示する方法なのか、など。

→取得したデータを一度VScodeで計算してその結果を画面に表示したいと思っています。

よろしくお願いします。

[junichiokamura]

 > 一応データ取得はできそうなのでプログラムをScriptTagでどのようにLiquid内に組み込むか考えようと思います。

こちらの件ですが、ScriptTag APIで挿入できるのはJavaScriptだけなので、Liquidは挿入できません。

Liquidを挿入するにはテーマファイルを書き換える必要があります。

> 取得したデータを一度VScodeで計算してその結果を画面に表示したいと思っています。

VSCodeはエディタですので、直接プログラムのソースコードとは紐づきませんが、その認識はあっていますでしょうか？

サーバー上でAPIで計算した結果をテーマ内に表示するのは、app proxyを使って、サーバーの結果をScriptTag APIで挿入したJSからAjax callで呼び出すのが良いと思います。

https://shopify.dev/tutorials/display-dynamic-store-data-with-app-proxies

または、下記のAjax APIを直接呼べば、テーマ内で同じくScriptTagで挿入したJSから、Product の全データ（サーバーのAPIで参照できるデータ）を取得できます。

この場合、GraphQLなどを呼ぶ必要はありません。

https://shopify.dev/docs/themes/ajax-api/reference/product

[akito]

お世話になっております。

返信が遅くなってしまい申し訳ありません。

> VSCodeはエディタですので、直接プログラムのソースコードとは紐づきませんが、その認識はあっていますでしょうか？

はい。あっています！！

> サーバー上でAPIで計算した結果をテーマ内に表示するのは、app proxyを使って、サーバーの結果をScriptTag APIで挿入したJSからAjax callで呼び出すのが良いと思います。

https://shopify.dev/tutorials/display-dynamic-store-data-with-app-proxies

または、下記のAjax APIを直接呼べば、テーマ内で同じくScriptTagで挿入したJSから、Product の全データ（サーバーのAPIで参照できるデータ）を取得できます。

この場合、GraphQLなどを呼ぶ必要はありません。

https://shopify.dev/docs/themes/ajax-api/reference/product

ありがとうございます。参考にさせていただきます。

junichiokamuraさんのGitHub（Taxの計算）を見様見真似＆諸々調べつつコード書いてみました。

処理の流れ的にはあっているのかご教示いただきたいです。

server/server.jsの79行目から124行目

https://github.com/aki-tech/main-discount-app

[junichiokamura]

共有いただいたコードですが、82行目のScript tagの挿入は、自分自身のApp proxyを呼んでいるなら不要かと思います。

通常、ScriptTag の挿入は、アプリインストール時（OAuthのcallback）で呼ばれます。

あとは、アプリの管理画面で、 proxy パスと、discount.js のパスをマッピングすればOKです。

[akito]

回答いただきありがとうございます。

標準機能であるのですね。

確認したらテーマによって差額表示機能があるものとないものがあるようです。

商品情報はSections/product-template.liquid で表示されていて、

variant.compare_at_price →定価（値引前価格）

variant.price →値引き後売価

をLiquid内で差し引き計算すれば値引き額を表示できます。

→ありがとうございます！！

大変参考になりました。

一応データ取得はできそうなのでプログラムをScriptTagでどのようにLiquid内に組み込むか考えようと思います。