FROM CACHE - jp_header

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

akito
新規メンバー
5 0 0

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

【やりたいこと】

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

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

 

【知りたいこと】

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

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

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

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

 

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

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

 

よろしくお願いします。

7件の返信7
Takuma
探検家
44 7 23

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

 

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

variant.compare_at_price →定価(値引前価格)

variant.price →値引き後売価

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

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

 

■コード例

Takuma_0-1607207063951.png

 

■商品情報の設定例

Takuma_1-1607207304601.png

 

 

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

 

junichiokamura
Community Manager
Community Manager
1162 272 480

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

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

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で表示したいのか、画面に表示する方法なのか、など。

Technical Partner Manager, Japan
akito
新規メンバー
5 0 0

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

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

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

 

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

variant.compare_at_price →定価(値引前価格)

variant.price →値引き後売価

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

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

大変参考になりました。

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

akito
新規メンバー
5 0 0

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

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

 

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

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

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

よろしくお願いします。

junichiokamura
Community Manager
Community Manager
1162 272 480

 > 一応データ取得はできそうなのでプログラムを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

 

 

Technical Partner Manager, Japan
akito
新規メンバー
5 0 0

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

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

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
Community Manager
Community Manager
1162 272 480

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

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

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

Technical Partner Manager, Japan