如何通过AJAX添加商品后刷新Shopify Dawn主题购物车抽屉

你的代码里调用drawer.renderContents(response)存在问题——cart/add.js的响应仅返回刚添加的商品信息，并非完整的购物车数据，而购物车抽屉需要完整的购物车状态（商品列表、总价、数量等）才能正确更新。以下是两种可行的修改方案：

方案1：利用Dawn主题内置的购物车工具函数 #

Dawn主题自带了封装好的购物车处理方法，直接调用即可自动刷新抽屉和购物车计数：

let formData = {
  'items': [{
    'id': productID,
    'quantity': 1
  }]
};
fetch(window.Shopify.routes.root + 'cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(formData)
})
.then(response => response.json())
.then(() => {
  // 调用主题内置方法，同步更新购物车抽屉和计数
  window.ShopifyCart.fetchCart().then(() => {
    window.ShopifyCart.renderCart();
  });
})
.catch((error) => {
  console.error('Error:', error);
});

方案2：手动获取完整购物车数据并渲染抽屉 #

如果内置方法不生效，可以手动请求完整购物车数据再渲染抽屉：

let formData = {
  'items': [{
    'id': productID,
    'quantity': 1
  }]
};
fetch(window.Shopify.routes.root + 'cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(formData)
})
.then(() => {
  // 请求完整购物车数据
  return fetch(window.Shopify.routes.root + 'cart.js');
})
.then(cartResponse => cartResponse.json())
.then(cartData => {
  // 传入完整购物车数据渲染抽屉
  drawer.renderContents(cartData);
  // 同步更新页面上的购物车数量气泡（如果有）
  const cartCount = document.querySelector('.cart-count-bubble');
  if (cartCount) cartCount.textContent = cartData.item_count;
})
.catch((error) => {
  console.error('Error:', error);
});

核心说明 #

• 不要直接用cart/add.js的响应渲染抽屉，必须通过cart.js获取完整的购物车状态数据。
• Dawn主题的购物车抽屉组件依赖完整的购物车对象来渲染商品列表、价格等内容，不完整的数据会导致抽屉无法正常更新。

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