カート画面のLiquid編集 数量が変更された場合の小計の取得について

[shira1]

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

カート画面のLiquid編集 数量が変更された場合の小計の取得について質問がございます。

テーマ：Debut

カート画面の小計をjavascriptにて、金額に10%を乗算した結果を表示しています。
小計は

<input type="hidden"  data-cart-subtotal value="{{ cart.total_price | money_with_currency }}" />

することで、取得できるのですが、数量が変更された場合に動的に変更されずに初期表示のままの金額となります。
こちら数量の変更に動的に変更される小計を取得する方法はありますでしょうか？

shopify developer のcart-liquidも拝見しましたが、その辺りの記述がなく行き詰まっております。

お教えいただければ幸いです。
よろしくお願いいたします。

[junichiokamura]

Liquidは、Shopifyが画面全体をブラウザに送る前にShopify側で分析して結果をHTMLに反映して返すものなので、Shopifyへの遷移がないと値は更新されません。なので、カートの変更がJavaScriptで行われている場合は、反映されません。カートの更新や情報の取得をJSで行うには以下のAjax APIが使えるので、これを試してみてください。

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

[shira1]

ご回答ありがとうございます。
カート更新のAPIについて承知しました。

もう1点質問がございます。

こちらのAPIを呼ぶタイミングは数量が変更された時になるかと存じますが、その数量が変更されたことはどのように監視すればよろしいでしょうか？
テーマ共通の監視できるLiquidの要素がございましたらご教授していただきたいです。  

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

[junichiokamura · Accepted solution]

数量が変更されるトリガーは各テーマがどのように実装しているかによるので、テーマのコード分析が必要です。

ブラウザの開発コンソールでの調査と、テーマのダウンロードとエディタでの検索などが必要になるかと思います。

大きく分けて、カートの数量を変更した時に、Shopifyに遷移して画面がリフレッシュされる動作であれば、Liquidで対応可能ですが、JavaScriptで遷移なしに行っている場合は、カートの数量変更が反映されるJavaScriptのイベントハンドラ（onchangeなど）を特定して、そこでAjax APIを呼ぶことになるかと思います。

[shira1]

早速のご回答ありがとうございます。
わかりました。コードを分析し数量や小計などを監視してする対応で進めようかと思います。

またこの辺りアプリのマニュアルなどでLiquidの編集箇所など記載しておく必要がありそうですね。

[junichiokamura]

あとは、テーマに依存せず変更を取得する方法としてWebhookがあります。

https://shopify.dev/docs/admin-api/rest/reference/events/webhook

ただし、Webhookは送信が遅れたり、通信が途絶える可能性もあるのでリアルタイムにストアフロントを変更するには向かないと思います。

また、通知を受け取った後にテーマに反映させるのに追加の開発が必要かと思います。

（web socketなどをwebhookを受け取るサーバー側で実装してそことテーマを通信させるような仕組みを作る必要があります）