# カート画面のLiquid編集 数量が変更された場合の小計の取得について **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [February 19, 2021, 1:21am UTC](https://community.shopify.com/t/liquid/36639 "2021-02-19T01:21:25Z")\ **Posts on this page:** 6\ **Page:** 1 ## AI-generated summary カート画面で表示している小計に対し、JavaScriptで10%加算した金額を出しているが、数量変更後もLiquidで取得した小計が初期表示のまま更新されない、という相談。 - 結論：Liquidはサーバー側でHTML生成時に評価されるため、ページ遷移や再描画がない限り値は動的更新されない。 - 数量変更をJavaScriptで処理しているテーマでは、Liquidだけで最新小計を取るのは難しく、ShopifyのAjax APIでカート情報を再取得する方法が案内された。 数量変更をどう検知するかはテーマ依存という整理。 - テーマが数量変更時にページを再読み込みするならLiquidで対応可能。 - 再読み込みせずJSで更新するなら、数量変更に使われているイベントハンドラ（例：onchange）をテーマコードから特定し、そのタイミングでAjax APIを呼ぶ必要がある。 補足としてWebhookも候補に挙がったが、通知遅延や追加実装が必要なため、ストアフロントのリアルタイム反映には不向きとされた。最終的に、テーマコードを分析して対応を進める方針になっており、完全解決までは至っていない。
**Author:** ![shira1](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@shira1](https://community.shopify.com/u/shira1)\ **Post date:** [February 19, 2021, 1:21am UTC](https://community.shopify.com/t/liquid/36639/1 "2021-02-19T01:21:25Z")
お世話になっております。 カート画面のLiquid編集 数量が変更された場合の小計の取得について質問がございます。 テーマ：Debut カート画面の小計をjavascriptにて、金額に10%を乗算した結果を表示しています。 小計は ```markup ``` することで、取得できるのですが、数量が変更された場合に動的に変更されずに初期表示のままの金額となります。 こちら数量の変更に動的に変更される小計を取得する方法はありますでしょうか？ [shopify developer のcart-liquid](https://shopify.dev/docs/themes/theme-templates/cart-liquid)も拝見しましたが、その辺りの記述がなく行き詰まっております。 お教えいただければ幸いです。 よろしくお願いいたします。 ---
**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\ **Post date:** [March 9, 2021, 9:57am UTC](https://community.shopify.com/t/liquid/36639/2 "2021-03-09T09:57:20Z")
Liquidは、Shopifyが画面全体をブラウザに送る前にShopify側で分析して結果をHTMLに反映して返すものなので、Shopifyへの遷移がないと値は更新されません。なので、カートの変更がJavaScriptで行われている場合は、反映されません。カートの更新や情報の取得をJSで行うには以下のAjax APIが使えるので、これを試してみてください。 [https://shopify.dev/docs/themes/ajax-api](https://shopify.dev/docs/themes/ajax-api) ---
**Author:** ![shira1](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@shira1](https://community.shopify.com/u/shira1)\ **Post date:** [March 10, 2021, 2:40am UTC](https://community.shopify.com/t/liquid/36639/3 "2021-03-10T02:40:17Z")
ご回答ありがとうございます。 カート更新のAPIについて承知しました。 もう1点質問がございます。 こちらのAPIを呼ぶタイミングは数量が変更された時になるかと存じますが、その数量が変更されたことはどのように監視すればよろしいでしょうか？ テーマ共通の監視できるLiquidの要素がございましたらご教授していただきたいです。 よろしくお願いいたします。 ---
**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\ **Post date:** [March 10, 2021, 2:55am UTC](https://community.shopify.com/t/liquid/36639/4 "2021-03-10T02:55:33Z")
数量が変更されるトリガーは各テーマがどのように実装しているかによるので、テーマのコード分析が必要です。 ブラウザの開発コンソールでの調査と、テーマのダウンロードとエディタでの検索などが必要になるかと思います。 大きく分けて、カートの数量を変更した時に、Shopifyに遷移して画面がリフレッシュされる動作であれば、Liquidで対応可能ですが、JavaScriptで遷移なしに行っている場合は、カートの数量変更が反映されるJavaScriptのイベントハンドラ（onchangeなど）を特定して、そこでAjax APIを呼ぶことになるかと思います。 ---
**Author:** ![shira1](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@shira1](https://community.shopify.com/u/shira1)\ **Post date:** [March 10, 2021, 4:19am UTC](https://community.shopify.com/t/liquid/36639/5 "2021-03-10T04:19:15Z")
早速のご回答ありがとうございます。 わかりました。コードを分析し数量や小計などを監視してする対応で進めようかと思います。 またこの辺りアプリのマニュアルなどでLiquidの編集箇所など記載しておく必要がありそうですね。 ---
**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\ **Post date:** [March 10, 2021, 5:00am UTC](https://community.shopify.com/t/liquid/36639/6 "2021-03-10T05:00:04Z")
あとは、テーマに依存せず変更を取得する方法としてWebhookがあります。 [https://shopify.dev/docs/admin-api/rest/reference/events/webhook](https://shopify.dev/docs/admin-api/rest/reference/events/webhook) ただし、Webhookは送信が遅れたり、通信が途絶える可能性もあるのでリアルタイムにストアフロントを変更するには向かないと思います。 また、通知を受け取った後にテーマに反映させるのに追加の開発が必要かと思います。 （web socketなどをwebhookを受け取るサーバー側で実装してそことテーマを通信させるような仕組みを作る必要があります）