Shopify店铺如何通过AJAX批量添加商品变体及对应数量到购物车

报错核心原因 #

你当前的代码存在3个关键问题，触发了Shopify Ajax接口的参数校验失败：

• Liquid循环逻辑错误：你在遍历商品变体的循环内，又强制把variant变量赋值为默认选中/第一个可用变体，导致所有表格行对应的都是同一个变体，没有遍历到所有变体
• 表单缺少必填的变体ID参数：Shopify加购接口必须传递变体ID标识要加购的商品，你当前表单只有数量输入项，没有携带变体ID
• 接口参数格式不符合要求：/cart/add.js批量加购时需要接收items数组参数，你直接提交原生表单数据的格式不符合接口要求

修复步骤 #

1. 修正Liquid表单代码

把原表单代码替换为以下内容，修复循环逻辑，新增变体ID隐藏字段，给数量输入框添加自定义属性存储对应变体ID：

<form action="/cart/add" method="post" id="bulk-add-to-cart-form">
  <table>
    <tr>
      {% for variant in product.variants %}
      <td>{{ variant.title }}</td>
      <td>{{ variant.price | money }}</td>
      <td>  
        <input type="hidden" name="variant_id[]" value="{{ variant.id }}">
        <input name="quantity[]" inputmode="numeric" value="0" class="variant-quantity" data-variant-id="{{ variant.id }}">
      </td>
      {% endfor %}
    </tr>
  </table>
  <input type="submit" value="Add to cart">
</form>

2. 修正AJAX请求逻辑

把原JS代码替换为以下内容，监听表单提交事件，遍历所有变体的输入数量，构造符合接口要求的参数后再发起请求：

let addToCartForm = document.querySelector('#bulk-add-to-cart-form');

addToCartForm.addEventListener('submit', function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  // 收集所有数量大于0的变体数据
  let items = [];
  document.querySelectorAll('.variant-quantity').forEach(input => {
    let quantity = parseInt(input.value);
    if (quantity > 0) {
      items.push({
        id: input.dataset.variantId,
        quantity: quantity
      });
    }
  });

  // 没有选中的商品就不发起请求
  if (items.length === 0) return;

  // 发起符合Shopify接口要求的AJAX请求
  fetch('/cart/add.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify({items: items})
  })
  .then(response => {
    if (!response.ok) throw new Error('加购失败');
    return response.json();
  })
  .then(data => {
    // 加购成功后的操作，比如提示成功、刷新购物车数量等
    window.location.href = '/cart';
  })
  .catch((error) => {
    console.error('Error:', error);
  });
});

验证说明 #

修改完成后测试：输入多个变体的数量后点击提交，即可一次性把所有数量大于0的变体添加到购物车，不会再出现参数缺失的报错。

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