在Next.js中使用BigCommerce Cart API：如何向同一购物车添加多商品

核心逻辑 #

BigCommerce提供了更新现有购物车的能力，问题在于你没有复用已生成的购物车ID，且未使用正确的商品添加端点。

具体解决方案 #

• 持久化存储购物车ID：首次调用创建购物车API后，将响应返回的id（购物车唯一标识）存入客户端存储（如localStorage/sessionStorage）或状态管理工具（如React Context、Zustand）。后续操作购物车前，先读取这个ID。
• 调用添加商品到现有购物车的API：若存在已保存的购物车ID，使用POST /carts/{cart_id}/items端点添加商品，而非重复调用创建购物车接口。请求体只需传入目标商品信息，示例结构如下：

  {
    "line_items": [
      {
        "product_id": 123,
        "quantity": 1
      }
    ]
  }
  

• 自动处理商品重复场景：该API会自动识别购物车内已存在的商品，若添加同款则直接增加对应商品数量；若为新商品，则新增购物车条目。

Next.js客户端示例代码 #

// 加入购物车函数
const addToCart = async (productId, quantity = 1) => {
  // 读取本地存储的购物车ID
  const existingCartId = localStorage.getItem('bc_cart_id');
  
  if (existingCartId) {
    // 向已有购物车添加商品
    const res = await fetch(`/api/bigcommerce/carts/${existingCartId}/items`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 此处需携带BigCommerce API认证头，如X-Auth-Token等
      },
      body: JSON.stringify({
        line_items: [{ product_id: productId, quantity }]
      })
    });
    const updatedCart = await res.json();
    // 更新本地购物车状态（可选）
    return updatedCart;
  } else {
    // 首次创建购物车
    const res = await fetch('/api/bigcommerce/carts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 认证头
      },
      body: JSON.stringify({
        line_items: [{ product_id: productId, quantity }]
      })
    });
    const newCart = await res.json();
    // 保存购物车ID到本地存储
    localStorage.setItem('bc_cart_id', newCart.id);
    return newCart;
  }
};

注：上述代码中的/api/bigcommerce/是Next.js的代理API路由，用于处理跨域请求并隐藏认证信息，你需要在对应路由文件中实现对BigCommerce官方API的转发逻辑。

内容的提问来源于stack exchange，提问作者Nedim