カートとチェックアウト
カートの追加・更新を実装し、Shopifyのチェックアウトへ正しく遷移させられる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、カートの追加・更新・削除を実装し、Shopifyのチェックアウトへ正しく遷移させられるようになります。
受託では、localStorageに商品を溜める自作カートはチェックアウトに渡せないので、CartFormと1本のactionで捌く型を最初に覚えます。
カートはどこにあるか
カートは、Storefront API側にあるオブジェクトです。
カートIDをCookieに保存し、context.cart.get()で復元します。
ブラウザのlocalStorageに商品を溜める設計にはしません。
CartFormと1本のactionで捌く
<CartForm route="/cart" action={CartForm.ACTIONS.LinesAdd} inputs={{ lines }}>がフォームを送ります。action側ではCartForm.getFormInput(formData)でactionとinputsを取り出し、cart.addLines()などを呼びます。
1つのルートで、追加・更新・削除・割引コードをまとめて捌きます。
チェックアウトへはどう進むか
cart.checkoutUrlに送るだけです。
以降はShopifyのチェックアウトになります（ドメイン設定に従います）。
チェックアウトの画面そのものは自作できません。
発展：buyerIdentityと楽観的UI
buyerIdentityで、国（Marketsの価格・通貨）とログイン済み顧客の情報をカートに紐付けます。
設定しないと、既定の市場の価格になります。
多言語対応とアカウント連携の要です。useOptimisticCartを使うと、サーバー応答前に数量を反映して体感を速くできます。
失敗したときは元に戻します。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。