cart-logic

购物车逻辑

概述

购物车逻辑涵盖商店如何管理顾客打算购买的商品：添加、移除和更新商品；在页面加载和不同设备之间保留购物车；以及在顾客登录时将访客购物车合并到账户中。在 Shopify、WooCommerce 和 BigCommerce 上，购物车是平台内置的，目标是正确配置并在需要时扩展它。只有无头店面才需要自定义代码。

何时使用此技能

• 用户在页面间导航时购物车状态丢失（未实现持久化）
• 访客登录后购物车中的商品消失（缺少合并逻辑）
• 实现购物车价格实时更新（优惠券、数量更改、运费估算）
• 构建需要自定义购物车实现的无头店面

核心说明

步骤 1：了解平台如何处理购物车逻辑

平台	购物车行为	配置位置
Shopify	内置购物车，自动持久化；使用 cookies/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 会自动为已登录的顾客持久化购物车；购物车会存储在顾客账户的服务器端
• 对于访客购物车，Shopify 使用 cart_token cookie（默认有效期为 30 天）

登录时合并访客购物车：

• Shopify 会自动处理此操作——访客登录后，其购物车会与现有账户购物车合并

通过 Shopify Functions 自定义购物车： 使用 Cart Transform Shopify Functions 修改购物车商品、应用自定义折扣或捆绑商品。前往 设置 → 自定义数据，并通过 Shopify CLI 部署 Cart Transform 函数。

自定义购物车追加销售和交叉销售： 从 Shopify App Store 安装 CartHook、ReConvert 或 Frequently Bought Together，无需自定义代码即可实现购物车追加销售逻辑。

---

WooCommerce

WooCommerce 的购物车内置于平台中，并基于会话运行。

配置购物车行为：

1. 前往 WooCommerce → 设置 → 产品 → 常规，配置购物车和加入购物车行为
2. 根据商店的用户体验偏好，启用或禁用 成功添加后跳转到购物车页面
3. 在 WooCommerce → 设置 → 高级 → 购物车页面 下，确认已指定购物车页面

为已登录用户启用持久购物车：

1. 前往 WooCommerce → 设置 → 账户与隐私
2. 启用 持久购物车 — 这会将已登录客户的购物车存储在数据库中，使其在不同会话和设备间保持不变

将访客购物车合并到账户： WooCommerce 会在客户登录时，自动将访客购物车与客户保存的购物车合并。为确保此功能正常运行，请保持启用 持久购物车。

扩展购物车商品数据（例如，添加产品定制选项）： 在主题的 functions.php 或自定义插件中使用 woocommerce_add_cart_item_data 过滤器，为购物车商品附加额外数据（礼品留言、雕刻文字等）。

购物车弃购跟踪： 安装 CartFlows 或 WooCommerce Cart Abandonment Recovery 插件，以跟踪并挽回弃购购物车。

---

BigCommerce

BigCommerce 使用其 Storefront Cart API 管理购物车。

配置购物车设置：

1. 前往 设置 → Storefront，配置购物车和结账行为
2. BigCommerce 会通过会话管理自动保持购物车状态

通过 Stencil 主题自定义购物车： 编辑 Stencil 主题中的购物车模板（templates/components/cart/），以修改购物车页面布局、商品展示和可用操作。

购物车追加销售： 使用 BigCommerce Cart API 检测购物车中的商品，并在购物车模板中有条件地显示相关产品或促销活动。

---

自定义 / 无头

对于无头店面，请使用平台的 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），它会自动处理购物车创建、商品管理和客户关联。

步骤 3：实现关键的购物车用户体验行为

无论使用哪个平台，以下购物车行为对转化率的影响最大：

1. 加入购物车后显示迷你购物车 — 大多数 Shopify、WooCommerce 和 BigCommerce 主题都支持在添加商品时打开滑出式购物车抽屉；请启用此功能，而不是跳转到购物车页面
2. 在购物车中显示库存水平 — 对库存较少的商品显示“仅剩 2 件”警告；Shopify 和 WooCommerce 都支持通过 metafields 和购物车商品数据实现此功能
3. 访客购物车持久化 — 确保访客购物车至少保留 30 天，让回访者能找到之前添加的商品；Shopify 默认支持此功能；WooCommerce 则需要配置会话时长设置
4. 免运费进度条 — 在购物车中显示“再购 $X 即可享受免运费”进度条；安装 Free Shipping Bar（Shopify）或 WooCommerce Free Shipping Bar 插件

最佳实践

• 使用平台原生购物车 — Shopify、WooCommerce 和 BigCommerce 的购物车经过实战检验，能够正确处理各种边缘情况（库存验证、价格变动、税费计算）
• 为已登录的客户启用持久化购物车 — 这三个平台都支持为账户提供服务器端购物车存储；请启用此功能
• 在结账时验证库存，而不只是添加到购物车时 — 商品可能会在访客购物车中售罄；请在结账时重新验证（平台会自动执行此操作）
• 醒目地显示购物车总额 — 包括商品数量和小计；这有助于减轻用户对总支出的顾虑
• 无头架构：使用平台的 Storefront API — Shopify 和 BigCommerce 的 Storefront API 经过生产环境验证，能够正确处理购物车合并、库存检查和结账发起

常见问题

问题	解决方案
用户登录后购物车消失（WooCommerce）	确保已在 WooCommerce → Settings → Accounts & Privacy 中启用 Persistent cart
浏览器重启后访客购物车为空	检查 Cookie 过期时间设置；Shopify 默认使用 30 天购物车令牌；WooCommerce 会话时长可配置
同一商品被重复添加，而不是增加数量	平台的原生购物车会处理此问题；如果在无头架构中使用 Storefront API，请使用 cartLinesUpdate 增加现有商品行的数量
价格变动后购物车显示的价格过时	Shopify 和 WooCommerce 会在结账时自动使用当前价格，而不是添加到购物车时的价格；系统会自动显示“价格已变动”通知
自定义添加到购物车代码绕过库存检查	始终使用平台官方的添加到购物车机制；直接写入购物车存储的自定义代码会跳过库存验证

相关技能

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