Shopify Sense主题添加商品后刷新购物车抽屉的问题

我正在对接Shopify Cart API，使用最新版Sense主题，将Cart Drawer作为购物车页面。已实现追加销售商品的添加功能，但商品加入购物车后，购物车抽屉不会自动刷新，必须硬刷新页面才能看到新增商品。

问题出在你的addToCart函数仅完成了商品添加操作，但没有触发主题内置的购物车抽屉刷新逻辑。以下是两种可行的解决方法：

方法一：调用主题内置的购物车抽屉刷新方法 #

Sense主题的cart-drawer.js中包含用于更新购物车内容的核心方法，你可以在商品添加成功后直接调用这些方法触发刷新：

修改你的Shopify.addToCart函数，在成功回调中加入抽屉刷新逻辑：

Shopify.addToCart = function(items) {
    fetch(window.Shopify.routes.root + 'cart/add.js', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(items)
    })
    .then(response => {
        if (!response.ok) throw new Error('添加商品失败');
        return response.json();
    })
    .then((cart) => {
        console.log("商品已成功加入购物车:", cart);
        // 调用购物车抽屉的渲染方法刷新内容
        if (window.cartDrawer) {
            cartDrawer.renderContents();
            // 如果需要自动打开抽屉，可添加 cartDrawer.open()
        }
    })
    .catch((error) => {
        console.error('添加商品出错:', error);
    });
};

方法二：触发主题监听的cart:updated事件 #

多数Shopify主题会通过监听cart:updated事件来同步更新购物车UI，你可以在商品添加成功后手动派发该事件：

Shopify.addToCart = function(items) {
    fetch(window.Shopify.routes.root + 'cart/add.js', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(items)
    })
    .then(response => {
        if (!response.ok) throw new Error('添加商品失败');
        return response.json();
    })
    .then((cart) => {
        console.log("商品已成功加入购物车:", cart);
        // 派发事件通知主题更新购物车相关UI
        document.dispatchEvent(new CustomEvent('cart:updated', { detail: cart }));
    })
    .catch((error) => {
        console.error('添加商品出错:', error);
    });
};

额外注意事项 #

• 确保你的代码在cart-drawer.js之后加载，保证window.cartDrawer实例或事件监听器已完成初始化。
• 如果上述方法无效，可查看cart-drawer.js源码，找到实际负责更新内容的函数（比如_updateContents或refresh），替换到回调中对应的调用位置。

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