こんにちは。櫻井です。
ネットショップでお買い物するときに、今いくつ商品カートに入れたっけ？ってなるときありませんか？
スーパーとかで買い物するのとは訳が違ってネットではどれくらい買っているのか目で見てわかりにくいところがあります。
あれもこれもとカートに入れていって気付いたらとんでもない量になっていたなんて経験がある人もいるのではないでしょうか？
なので最低限カートボタンの横に今何品カートに入っているかわかるとユーザーにとって親切だと思うんです。
そこで今回はShopifyでカートボタンにカート内の商品の合計数を表示する方法を説明したいと思います。

まずはliquidを構築

まずはベースとなるliquidを構築します。いろいろ調べると{{ cart.item_count }}でカートないの商品の数を取得できることがわかりました。
以下のソースを商品の合計個数を表示したい場所に書き込んでください。

  <div class="l-header_cart_count"><span class="cart-item-count">{{ cart.item_count }}</span></div>

しかしこれだけだとカートに商品を追加した直後や商品を削除したり下手したときにすぐに反映されません。
なので次はtheme.liquidを開き以下のソースを加えてJSを読み込ませます。

  {{ '//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' | script_tag }}
  {{ 'api.jquery.js' | shopify_asset_url | script_tag }}

ここからはJSを書き加えます。liquidの準備はこれで終わりです。

JSを書き加える

まずはカートに商品を追加したとき、カート内の商品の数量を変えたときのJSです。
theme.jsを開き「_setCartCountBubble: function(quantity)」を検索してください。
2箇所あるので両方に

  $('.cart-item-count').text(quantity);

を追加します。これでカートに商品を追加したときとカート内で数量を変更したときにもカート全体の商品の個数を変更することができます。
続いて「_onRemoveItem: function(evt) 」を検索し、中にあるdone()の中に

  $('.cart-item-count').text(state.item_count);

を追加します。これで商品をカートから削除したときにもカートないの個数を反映することができます。

まとめ

今回はShopifyのデフォルトテーマ Debut でカートボタンに現在のカート内の商品の合計数を表示する方法を説明しました。本当はデフォルトで読み込まれているJSをいじりたくなかったんですが。新たにJSを追加して行おうとするとバッティングしてしまいうまくいかず止むを得ずこういった形になりました。しかし商品がしっかりユーザーのアクションに合わせて更新できるなんてShopifyってすごいですね。