cart-logic

カートのロジック

概要

カートのロジックとは、購入者が購入しようとしている商品をストアで管理する方法です。商品の追加、削除、更新、ページの読み込みやデバイスをまたいだカートの保持、顧客がログインした際のゲストカートとアカウントの統合が含まれます。Shopify、WooCommerce、BigCommerceでは、カートはプラットフォームに組み込まれています。目標は、カートを適切に設定し、必要に応じて拡張することです。カスタムコードが必要になるのは、ヘッドレスストアフロントの場合のみです。

このスキルを使用する場面

• ユーザーがページ間を移動するとカートの状態が失われる場合（永続化の不足）
• ログイン後にゲストカートの商品が消えてしまう場合（統合ロジックの不足）
• カートの価格をリアルタイムで更新する場合（クーポン、数量の変更、配送料の見積もり）
• カスタムカートの実装が必要なヘッドレスストアフロントを構築する場合

主な手順

ステップ 1：プラットフォームでのカートの処理方法を把握する

プラットフォーム	カートの動作	設定場所
Shopify	永続化機能が組み込まれたカート。Cookie／localStorageを使用します	テーマのLiquidテンプレート＋Cart API。Cart Transform Shopify Functionで拡張します
WooCommerce	セッションによる永続化機能が組み込まれたカート。PHPフックで設定します	WooCommerceの設定＋woocommerce_add_cart_item_dataおよびwoocommerce_cart_item_priceフィルター
BigCommerce	Storefront Cart APIが組み込まれたカート。Cookieでカートを保持します	BigCommerceのStencilテーマ＋Storefront Cart API
カスタム／ヘッドレス	プラットフォームAPIまたはShopify／BigCommerce Storefront APIを使って一から構築する必要があります	下記の「カスタム／ヘッドレス」セクションを参照してください

ステップ 2：カートの動作を設定・拡張する

---

Shopify

Shopifyのカートは自動的に管理されます。拡張するには、次の手順に従います。

カートドロワーまたはページをカスタマイズする：

1. オンラインストア → テーマ → カスタマイズに移動します
2. カートセクションを選択し、カートの種類（ドロワーまたはページ）、商品の表示、数量コントロールを設定します
3. 必要に応じて、カート設定でカートメモと配送料の見積もりを有効にします

デバイス間でのカートの永続化を有効にする（アカウントが必要です）：

• Shopifyはログイン済みの顧客のカートを自動的に保持します。カートはアカウントに紐付けてサーバー側に保存されます
• ゲストカートにはcart_token Cookieを使用します（デフォルトの有効期限は30日です）

ログイン時にゲストカートを統合する：

• Shopifyが自動的に処理します。ゲストがログインすると、そのカートは既存のアカウントのカートと統合されます

Shopify Functionsによるカートのカスタマイズ： Cart Transform Shopify Functionsを使用すると、カート内の商品を変更したり、カスタム割引を適用したり、商品をバンドルしたりできます。設定 → カスタムデータに移動し、Shopify CLIを使ってCart Transform Functionをデプロイします。

カスタムのカートアップセルとクロスセル： カスタムコードを使わずにカートのアップセルロジックを実装するには、Shopify App StoreからCartHook、ReConvert、またはFrequently Bought Togetherをインストールします。

---

WooCommerce

WooCommerce のカートは標準搭載されており、セッションベースです。

カートの動作を設定する：

1. WooCommerce → Settings → Products → General に移動し、カートとカートへの追加の動作を設定します
2. ストアの UX の好みに応じて、Redirect to cart page after successful addition を有効または無効にします
3. WooCommerce → Settings → Advanced → Cart page で、カートページが割り当てられていることを確認します

ログインユーザー向けに永続カートを有効にする：

1. WooCommerce → Settings → Accounts & Privacy に移動します
2. Persistent cart を有効にします。これにより、ログイン中の顧客のカートがデータベースに保存され、セッションやデバイスをまたいで保持されます

ゲストカートとアカウントの統合： WooCommerce は、顧客がログインするとゲストカートを保存済みのカートに自動的に統合します。この機能を確実に動作させるには、Persistent cart を有効にしておきます。

カートアイテムのデータを拡張する（例：商品のカスタマイズオプション）： テーマの functions.php またはカスタムプラグインで woocommerce_add_cart_item_data フィルターを使用すると、カートアイテムに追加データ（ギフトメッセージや刻印テキストなど）を付加できます。

カート放棄の追跡： CartFlows または WooCommerce Cart Abandonment Recovery プラグインをインストールして、放棄されたカートを追跡・回復します。

---

BigCommerce

BigCommerce では、カート管理に Storefront Cart API を使用します。

カート設定を行う：

1. Settings → Storefront に移動し、カートとチェックアウトの動作を設定します
2. BigCommerce のセッション管理により、カートは自動的に保持されます

Stencil テーマでカートをカスタマイズする： Stencil テーマのカートテンプレート（templates/components/cart/）を編集して、カートページのレイアウト、アイテムの表示、利用可能な操作を変更します。

カート内でのアップセル： BigCommerce Cart API を使用してカート内のアイテムを検出し、カートテンプレートに関連商品やプロモーションを条件に応じて表示します。

---

Custom / Headless

ヘッドレスストアフロントでは、カートの保存機能を一から構築するのではなく、プラットフォームの Storefront API を使用します。

Shopify Storefront API（Shopify ベースのヘッドレスストアに推奨）：

// Create a cart
const createCart = async () => {
  const response = await fetch(`https://${SHOP_DOMAIN}/api/2024-01/graphql.json`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Storefront-Access-Token': STOREFRONT_TOKEN,
    },
    body: JSON.stringify({
      query: `
        mutation cartCreate($input: CartInput!) {
          cartCreate(input: $input) {
            cart { id checkoutUrl }
            userErrors { field message }
          }
        }
      `,
      variables: { input: { lines: [{ merchandiseId: variantGid, quantity: 1 }] } },
    }),
  });
  const { data } = await response.json();
  return data.cartCreate.cart;
};

// Add an item to an existing cart
const addToCart = async (cartId, variantGid, quantity) => {
  const response = await fetch(`https://${SHOP_DOMAIN}/api/2024-01/graphql.json`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Storefront-Access-Token': STOREFRONT_TOKEN,
    },
    body: JSON.stringify({
      query: `
        mutation cartLinesAdd($cartId: ID!, $lines: [CartLineInput!]!) {
          cartLinesAdd(cartId: $cartId, lines: $lines) {
            cart { id totalQuantity cost { totalAmount { amount currencyCode } } }
          }
        }
      `,
      variables: { cartId, lines: [{ merchandiseId: variantGid, quantity }] },
    }),
  });
  const { data } = await response.json();
  return data.cartLinesAdd.cart;
};

cartId を Cookie または localStorage に保存します。ログイン時に cartBuyerIdentityUpdate を使用してカートを顧客のアカウントに関連付けます。統合は Shopify が自動的に処理します。

BigCommerce Storefront API（BigCommerce ベースのヘッドレスストア向け）：

BigCommerce Storefront Cart API（/api/storefront/carts）を使用します。カートの作成、アイテムの管理、顧客との関連付けが自動的に処理されます。

Step 3: 主要なカート UX 動作を実装する

プラットフォームにかかわらず、以下のカート動作はコンバージョンに最も大きく影響します。

1. カートへの追加時にミニカートを表示する — Shopify、WooCommerce、BigCommerce のほとんどのテーマは、アイテムが追加されたときに開くスライド式のカートドロワーに対応しています。カートページへリダイレクトする代わりに、これを有効にします
2. カート内に在庫数を表示する — 在庫が少ないアイテムに「残り 2 点」の警告を表示します。Shopify と WooCommerce はどちらも、メタフィールドとカートアイテムデータを使ってこれに対応しています
3. ゲストカートの保持 — リピーターが商品を見つけられるよう、ゲストカートを少なくとも 30 日間保持します。Shopify ではデフォルトで保持されますが、WooCommerce ではセッション期間の設定が必要です
4. 送料無料までの進捗バー — カートに「送料無料まであと $X」のバーを表示します。Free Shipping Bar（Shopify）または WooCommerce Free Shipping Bar プラグインをインストールします

ベストプラクティス

• プラットフォーム標準のカートを使用する — Shopify、WooCommerce、BigCommerce のカートは実績があり、在庫確認、価格変更、税額計算などの例外的なケースにも正しく対応します。
• ログイン済みの顧客にはカートの永続化を有効にする — 3 つすべてのプラットフォームでアカウント向けのサーバーサイドカート保存に対応しているため、有効にしてください。
• カートに追加するときだけでなく、チェックアウト時にも在庫を確認する — ゲストのカートに商品が入っている間に売り切れる場合があります。チェックアウト時に再確認してください（プラットフォームでは自動的に行われます）。
• カートの合計金額を目立つように表示する — 商品数と小計を含めて表示すると、総支出に対する不安を軽減できます。
• ヘッドレスの場合はプラットフォームの Storefront API を使用する — Shopify と BigCommerce の Storefront API は本番環境での使用を想定して十分に強化されており、カートの統合、在庫確認、チェックアウトの開始に正しく対応します。

よくある落とし穴

問題	解決策
ユーザーがログインするとカートが消える（WooCommerce）	WooCommerce → 設定 → アカウントとプライバシーで、永続カートが有効になっていることを確認してください
ブラウザーの再起動後にゲストのカートが空になる	Cookie の有効期限設定を確認してください。Shopify ではデフォルトでカートトークンの有効期間が 30 日です。WooCommerce ではセッション期間を設定できます
同じ商品を追加すると数量が増えず、二重に登録される	プラットフォーム標準のカートなら対応できます。Storefront API を使ったヘッドレス構成の場合、既存の明細の数量を増やすには cartLinesUpdate を使用してください
価格変更後にカートに古い価格が表示される	Shopify と WooCommerce では、カートに追加したときの価格ではなく、チェックアウト時の現在の価格が自動的に使用されます。「価格が変更されました」という通知も自動的に表示されます
カスタムのカート追加コードが在庫確認を回避する	常にプラットフォーム公式のカート追加手段を使用してください。カートの保存領域に直接書き込むカスタムコードでは、在庫確認が省略されます

関連スキル

• @checkout-flow-optimization
• @guest-checkout
• @inventory-tracking
• @stripe-integration