使用Shopify /cart/change.js移除购物车商品时遇400错误求助

常见问题及修复步骤 #

• 参数格式错误
  /cart/change.js接口对参数格式有严格要求：移除商品时，需传递quantity: 0，并搭配line（商品所在行号，从1开始计数）或id（商品变体ID），二者不能同时传递。
  错误示例：

  // 错误：同时传递line和id，或quantity未设为0
  fetch('/cart/change.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify({
      line: 1,
      id: 123456789,
      quantity: 1
    })
  })
  

  正确示例：

  // 正确：用line指定行号，quantity设为0
  fetch('/cart/change.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify({
      line: 1,
      quantity: 0
    })
  })
  

• 请求头缺失或错误
  必须在请求头中添加Content-Type: application/json，Shopify AJAX接口仅接受JSON格式的请求体。部分主题还需额外添加X-Requested-With: XMLHttpRequest头，可尝试补充。

• 行号或变体ID无效
  检查传递的line是否为正确的行号（从1开始，而非0），或id是否为有效的商品变体ID。可先调用/cart.js获取购物车数据，确认参数正确性：

  fetch('/cart.js')
    .then(res => res.json())
    .then(cart => console.log(cart.items)) // 查看每个商品的line和id字段
  

• CSRF令牌缺失
  Shopify AJAX请求需携带CSRF令牌，页面中通常会自动生成<meta name="csrf-token">标签。需在请求头中加入X-CSRF-Token字段，值为该标签的content属性：

  const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
  fetch('/cart/change.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'X-CSRF-Token': csrfToken
    },
    body: JSON.stringify({
      line: 1,
      quantity: 0
    })
  })
  

• 直接测试接口获取错误详情
  在浏览器控制台中运行简化请求，查看返回的具体错误信息，Shopify的400响应通常会包含明确描述：

  fetch('/cart/change.js', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({line: 1, quantity: 0})
  }).then(res => res.json()).then(console.log).catch(console.error)
  

额外检查点 #

• 确认购物车中确实存在对应line或id的商品，避免传递不存在的参数。
• 检查是否有其他JS代码拦截了请求，修改了参数或请求头信息。

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