カート②：Ajax Cart APIとカートドロワー
Ajax Cart APIでページ遷移なしにカートを更新し、Section RenderingでUIを再描画するドロワーを実装できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、ページ遷移なしにカートへ追加して、ドロワーと件数を更新する仕組みを作れるようになります。
受託では、サーバーが描画したHTMLを差し替える形にすると、翻訳や通貨書式をJSで二重に作らずに済みます。
Ajax Cart APIとは、カートをJSONで操作する入口
GET /cart.jsでカートの中身を取ります。POST /cart/add.jsで追加し（items配列・properties・selling_plan）、/cart/update.jsで数量・メモ・属性をまとめて更新します（updates・note・attributes）。/cart/change.jsは1行だけの変更（lineまたはidとquantity）、/cart/clear.jsは全消去です。
すべてJSONを返し、ヘッダーはContent-Type: application/jsonにします。
Section Renderingはどう組み合わせるか
リクエストにsections: 'cart-drawer,cart-icon-bubble'を付けると、再描画済みのHTMLが同じレスポンスのsectionsに入って返ります。
JS側にHTMLテンプレートを持たずに済みます。
描画に失敗したセクションはnullになります。
エラーはどう扱うか
在庫超過のときは422が返り、本文は{ status, message, description }です。descriptionをそのまま表示すれば十分です。
ネットワークが失敗したときは、先に更新した表示（楽観的更新）を巻き戻します。
発展：ドロワーの実装と現場の注意
<cart-drawer>のCustom Elementにまとめ、送信中はボタンをdisabledにして二重送信を防ぎます。
開いたらドロワーへ、閉じたらボタンへフォーカスを戻します。
バンドル・アップセル系のアプリが/cart/add.jsを横取りして動作を変えることがあるので、不具合の切り分けはネットワークタブから始めます。
URLはroutes.cart_add_urlから取ると、多言語でも壊れません。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。