Shopify：JS制御が必要なデフォルト機能

概要

皆さんは、既存テーマを使わずにShopifyサイトをゼロから構築したことはありますか？ 一見、Shopifyの標準機能（Liquidだけで完結しているもの）に見えて、実はJavaScriptによる制御が必要な機能がいくつか存在します。

今回は、デフォルトテーマ「Dawn」を参考に、独自開発の際に注意すべき「実はJavaScriptで動いている機能」を紹介します。

内容

1. ミニカート（ドロワーカート）機能

「カートに追加」ボタンを押した際、画面を遷移させずにカート中身を表示する機能です。 Shopifyに「ミニカート」という特別なオブジェクトが存在するわけではありません。これはAjax APIを使用して非同期で cart オブジェクトを取得し、動的にHTMLを書き換えることで実現されています。

2. カート内の数量変更と再計算

カート画面で商品の数量を変更した際、ページをリロードせずに合計金額が変わる動きもJavaScriptによるものです。 ただ数量を変えるだけではサーバー上のデータは更新されません。非同期通信（Fetch API等）でサーバーに数量を送信し、返ってきた最新の計算結果をDOMに反映させる必要があります。

3. 商品一覧のソート・フィルタリング

並び替えや絞り込みは、URLのパラメーターを書き換えることで制御可能です。 しかし、Dawnなどのモダンなテーマでは、ページ全体をリロードせずに非同期で商品リスト部分だけを差し替える挙動になっています。これを再現するには、JavaScriptでの履歴管理（History API）とセクションレンダリングAPIの理解が不可欠です。

4. 商品ページでの数量セレクター

「＋」「ー」ボタンで数量を増減させるUIは、HTMLの標準機能ではありません。JavaScriptでインプット値を制御し、さらに「在庫数以上の入力を防ぐ」といったバリデーションもJS側で行われています。

5. その他の細かい制御

• エラーハンドリング： 在庫以上の商品をカートに入れようとした際のアラート表示。

• 商品の削除： カート内から特定のアイテムを即座に消去する挙動。

まとめ

これらに共通するのは、「ユーザー体験（UX）を高めるための非同期通信（Ajax）」であるという点です。

Shopifyをゼロから（Headlessやオリジナルテーマで）構築する場合、これらは自動では付いてきません。Liquidの知識だけでなく、「Shopify Ajax API」をJavaScriptでどう叩くかを設計に組み込む必要があります。