移除侧边栏购物车弹窗后，购物车计数器不递增问题求助

你的问题出在注释掉了product:added自定义事件的触发代码——原来的Header购物车计数器应该是通过监听这个事件来实现实时更新的，移除后自然无法同步数量。另外你虽然获取了CartCount元素，但没有在商品添加成功后主动更新它的内容。

方案一：恢复自定义事件（推荐，保持原有逻辑一致性） #

如果原来的计数器逻辑是监听product:added事件来更新的，只需要取消那段代码的注释即可：

setTimeout(function() {
    document.dispatchEvent(new CustomEvent('product:added', {
        bubbles: true,
        detail: {
            variant: cart,
            quantity: 1
        }
    }));
}, 1200);

这样原有监听该事件的计数器逻辑就能正常触发，实现实时更新。

方案二：直接更新计数器数值 #

如果不想依赖原有事件，也可以在ajax成功回调里直接修改CartCount的内容：
在success函数里，比如在第一个setTimeout的回调中添加以下代码：

// 直接更新购物车计数
CartCount.textContent = cart.item_count;

完整修改后的success部分示例：

success: function(cart) {
    setTimeout(function() {
       $(".loader_" + id).removeClass("add-success--adding");
        $(".loader_" + id).addClass("add-success--added");
//              cartRecommended(pro_id);
        // 直接更新购物车计数
        CartCount.textContent = cart.item_count;
    }, 500);

    setTimeout(function() {
        $(".loader_" + id).removeClass("add-success--adding").removeClass("add-success--added");
      
    }, 1600);
    setTimeout(function() {
//        $('#backdrop').addClass('backdrop_active');
    }, 2000);
}

原理说明：ajax请求成功后返回的cart对象包含item_count字段，这是购物车的总商品数量，直接把这个值赋值给计数器元素的文本内容即可实现实时更新。

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