使用Snipcart v3 JS SDK适配购物车商品独立行教程及无限重复添加问题

• 无限重复添加的核心原因是事件递归：在item.adding回调内直接调用Snipcart.api.cart.items.add接口，每次API调用都会重新触发item.adding事件，未设置阻断标记的情况下，每次触发都会再次拆分商品、再次调用API，形成无终止的循环。
• 默认流程未阻断：当前代码仅修改了传入item的数量，没有主动阻止Snipcart默认的原商品添加逻辑，会导致原商品和循环拆分的商品重复进入购物车。
• 数组浅填充问题：new Array(quantity).fill({...})生成的数组所有项共享同一个对象引用，容易出现参数串改，无法生成独立的商品实例。

Snipcart v3统一了所有加购入口的事件触发机制，不管是按钮点击、SDK调用的加购动作，都会经过item.adding事件处理，因此实现拆分加购时必须加上递归阻断逻辑，核心改动如下：

• 新增全局标记区分外部用户触发的加购、内部循环触发的加购，内部触发的加购直接跳过拆分逻辑
• 在事件回调中主动调用Snipcart.events.prevent()阻断默认加购流程，避免重复添加
• 为每个拆分的商品生成独立的对象实例，配置stackable: "never"保证商品不被自动合并，实现购物车内每个商品独占一行的效果

适配后的完整代码：

// 内部加购标记，阻断无限递归
let isInternalAdd = false;

document.addEventListener('snipcart.ready', () => {
  Snipcart.events.on('item.adding', async (item) => {
    // 内部触发的加购直接放行，不执行拆分逻辑
    if (isInternalAdd) return;

    // 阻断Snipcart默认的加购流程，避免重复入车
    Snipcart.events.prevent();

    const { quantity: totalTicketQty } = item;
    // 生成独立的拆分商品实例，每个单独占一行
    const splitTicketItems = Array.from({ length: totalTicketQty }, () => ({
      id: item.id,
      name: item.name,
      price: item.price,
      url: item.url,
      customFields: item.customFields ? { ...item.customFields } : {},
      quantity: 1,
      stackable: "never"
    }));

    // 切换为内部触发标记
    isInternalAdd = true;
    try {
      // 顺序添加拆分后的商品，避免并发导致的标记失效
      for (const ticketItem of splitTicketItems) {
        await Snipcart.api.cart.items.add(ticketItem);
      }
    } catch (err) {
      console.error('门票拆分添加失败', err);
    } finally {
      // 无论成功失败，重置标记恢复正常加购流程
      isInternalAdd = false;
    }
  });
});

• v3版本的事件阻断不能靠修改item的返回值实现，必须调用官方提供的Snipcart.events.prevent()方法才能真正终止默认加购流程
• 拆分的每个商品必须带上stackable: "never"配置，否则Snipcart会自动合并相同ID、相同自定义字段的商品为同一行，达不到门票每个单独成行的效果
• 内部加购的逻辑要使用顺序遍历替代原代码中的forEach异步循环，避免并发执行时isInternalAdd标记被提前重置，导致递归再次触发

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