Shopify购物车数量变更后，无法获取/cart/change.js数据更新函数

你的核心问题是：代码仅在页面首次加载时执行，而用户通过/cart/change.js更新购物车数量是AJAX异步操作，页面不会刷新，所以原函数不会重新触发，导致结账按钮参数还是旧的数量数据。

解决方案步骤： #

• 利用Shopify主题自带的cart:updated事件（多数Shopify主题都会触发这个自定义事件，用于通知购物车内容变更）
• 重构代码逻辑，让核心功能可以被重复调用
• 避免重复绑定点击事件，直接修改按钮的跳转属性而非重复绑定onclick

修改后的完整代码： #

// 封装获取购物车数据并生成参数的核心逻辑
async function getCartParams() {
  try {
    const res = await fetch('/cart.json');
    const data = await res.json();
    
    // 生成SKU+数量的参数字符串
    return data.items.map(item => `${item.sku}.${item.quantity}`).join('_');
  } catch (err) {
    console.error('获取购物车数据失败:', err);
    return '';
  }
}

// 更新结账按钮的跳转链接
async function updateCheckoutButton() {
  const params = await getCartParams();
  const checkoutBtn = document.querySelector('.cart__submit');
  
  if (checkoutBtn && params) {
    // 优先设置href属性（如果是a标签）
    checkoutBtn.href = `https://cleannutra.pay.clickbank.net/?cbitems=${params}`;
    // 兼容按钮类型元素，保留点击跳转逻辑
    checkoutBtn.onclick = () => {
      location.href = checkoutBtn.href;
      return false;
    };
  }
}

// 页面加载时初始化
updateCheckoutButton();

// 监听Shopify官方购物车更新事件
document.addEventListener('cart:updated', updateCheckoutButton);

// 兼容部分不触发cart:updated的主题，拦截购物车相关AJAX请求
(function() {
  const originalFetch = window.fetch;
  window.fetch = async function(resource, options) {
    const response = await originalFetch(resource, options);
    // 检测是否是购物车更新/添加的请求
    if (resource.includes('/cart/change') || resource.includes('/cart/add')) {
      updateCheckoutButton();
    }
    return response;
  };
})();

代码说明： #

1. 核心逻辑封装：把购物车数据获取和参数生成拆成独立函数getCartParams，返回Promise，让代码更清晰易维护。
2. 按钮更新逻辑：updateCheckoutButton负责获取最新参数并同步到结账按钮，同时兼容链接和按钮两种元素类型。
3. 双重事件监听：
   • 优先使用Shopify标准的cart:updated事件，这是主题开发中通用的购物车变更通知方式。
   • 额外添加fetch拦截逻辑，兼容那些未实现cart:updated事件的自定义主题，只要调用了购物车相关接口就自动触发更新。
4. 错误处理：添加try/catch捕获请求失败的情况，避免代码崩溃影响其他功能。

额外兼容处理： #

如果你的主题使用jQuery的AJAX而非原生fetch，替换fetch拦截部分为以下代码：

$(document).ajaxComplete(function(event, xhr, settings) {
  if (settings.url.includes('/cart/change') || settings.url.includes('/cart/add')) {
    updateCheckoutButton();
  }
});

同时确保.cart__submit选择器与你主题中实际的结账按钮类名/ID匹配。

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