如何在购物车中支持同一商品不同规格（如尺寸、价格）的独立添加-js教程-PHP中文网

如何在购物车中支持同一商品不同规格（如尺寸、价格）的独立添加

本文讲解如何改造现有 redux 购物车逻辑，使同一商品（相同 id）能以不同尺寸（size）作为独立条目加入购物车，并分别维护其数量与价格，避免规格混同导致的计数错误。

本文讲解如何改造现有 redux 购物车逻辑，使同一商品（相同 id）能以不同尺寸（size）作为独立条目加入购物车，并分别维护其数量与价格，避免规格混同导致的计数错误。

在电商类应用中，一个常见需求是：同一商品（例如“Coffee”，ID 为 'C1'）可提供多种规格（如 S/M/L 尺寸），每种规格对应不同价格和库存。此时，用户可能同时将 'C1' + size: 'S' 和 'C1' + size: 'L' 加入购物车——它们应被视为两个独立商品项，而非同一商品的数量叠加。

当前代码的问题在于：ADD 动作仅依赖 action.payload.id 判断是否已存在，导致所有尺寸都被视为同一商品，无法区分规格。解决核心是 将商品唯一性标识从 id 升级为 (id, size) 组合键。

✅ 正确实现：按 ID + size 唯一识别商品项

首先，确保 ADD 动作的 payload 包含 size 字段（例如 { id: 'C1', size: 'M' }）。然后重写 ADD case：

case 'ADD':
  // 1. 从 ProductData 中查找原始商品信息
  const product = state.products.find(p => p.id === action.payload.id);
  if (!product) return state; // 安全防护：商品不存在

  // 2. 根据 size 查找对应价格（可选：校验 size 是否有效）
  const priceObj = product.prices.find(p => p.size === action.payload.size);
  const finalPrice = priceObj ? parseFloat(priceObj.price) : product.price;

  // 3. 构建购物车条目（含规格、价格、数量）
  const newItem = {
    id: product.id,
    name: product.name,
    size: action.payload.size,
    price: finalPrice,
    currency: priceObj?.currency || '$',
    qty: 1,
  };

  // 4. 检查 cart 中是否存在完全相同的 (id + size) 条目
  const existingIndex = state.cart.findIndex(
    item => item.id === newItem.id && item.size === newItem.size
  );

  if (existingIndex !== -1) {
    // 已存在：仅增加数量
    const updatedCart = state.cart.map((item, idx) =>
      idx === existingIndex ? { ...item, qty: item.qty + 1 } : item
    );
    return { ...state, cart: updatedCart };
  } else {
    // 不存在：新增条目
    return { ...state, cart: [...state.cart, newItem] };
  }

⚠️ 同时修正其他动作的兼容性

DELETE、INCREASE、DECREASE 等动作也需接收 size 字段，否则无法准确定位目标项。
修改调用处（如按钮事件）传参为 { id: 'C1', size: 'M' }，并同步更新 reducer：

case 'DELETE':
  return {
    ...state,
    cart: state.cart.filter(
      item => !(item.id === action.payload.id && item.size === action.payload.size)
    ),
  };

case 'INCREASE':
  const incIndex = state.cart.findIndex(
    item => item.id === action.payload.id && item.size === action.payload.size
  );
  if (incIndex === -1) return state;
  const incCart = state.cart.map((item, i) =>
    i === incIndex ? { ...item, qty: item.qty + 1 } : item
  );
  return { ...state, cart: incCart };

case 'DECREASE':
  const decIndex = state.cart.findIndex(
    item => item.id === action.payload.id && item.size === action.payload.size
  );
  if (decIndex === -1) return state;
  const decCart = state.cart
    .map((item, i) =>
      i === decIndex ? { ...item, qty: Math.max(1, item.qty - 1) } : item
    )
    .filter(item => item.qty > 0); // 移除 qty ≤ 0 的项
  return { ...state, cart: decCart };

? 注意事项与最佳实践

不要修改原始 ProductData：购物车中的 price 应取自 prices 数组中匹配 size 的值，而非直接使用 product.price（该字段可作为兜底价）。
前端 UI 需显式传递 size：Add to Cart 按钮应绑定所选尺寸，例如 <button onpress="{()"> dispatch({ type: 'ADD', payload: { id: 'C1', size: selectedSize } })} /></button>。
考虑扩展性：若未来需支持颜色、口味等多维规格，建议将唯一键改为 const key =${id}|${size}|${color}``，或使用对象深比较。
价格格式化：示例中 parseFloat(priceObj.price) 假设价格字符串可安全转换；生产环境建议增加校验（如 !isNaN(parseFloat(...))）。