javascript 将项目添加到购物车后计数器不递增

1qczuiv0 于 2023-08-07 发布在 Java

关注(0)|答案(2)|浏览(93)

我希望你一切都好。最近，我遇到了一个问题，我的代码后，作出修改，以消除弹出的侧栏车。现在的问题是，当使用快速添加按钮将项目添加到购物车时，计数器不再递增。奇怪的是，计数器只反映刷新页面时添加的正确项数，而在我进行代码更改之前，情况并非如此。如果有人能在这个问题上帮助我，我将不胜感激。下面是我用来删除弹出窗口的修改代码：

function onQuickBuyButtonClicked(id, pro_id) {
    const CartCount = document.getElementsByClassName('Header__CartCount')[0];

    $(".loader_" + id).addClass("add-success--adding");
    const product = {
        id: id,
        quantity: 1
    };

    $.ajax({
        type: 'POST',
        url: '/cart/add.js',
        data: JSON.stringify(product),
        dataType: 'json',
        headers: {
            'Content-Type': 'application/json'
        },
        success: function(cart) {
            setTimeout(function() {
               $(".loader_" + id).removeClass("add-success--adding");
                $(".loader_" + id).addClass("add-success--added");
//              cartRecommended(pro_id);
            }, 500);

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

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

            var r = jQuery.parseJSON(errorThrown.responseText);
            $(".error_" + pro_id).html("Error: " + r.description).show();
            setTimeout(function() {
                $(".error_" + pro_id).html("").hide(100);
            }, 3000);
        }
    });
return false;
}

字符串
非常感谢您的帮助！

JavaScript

来源：https://stackoverflow.com/questions/76802269/counter-not-incrementing-after-adding-items-to-cart

2条答案

按热度按时间

41zrol4v1#

只需使用已编码到主题代码中的自定义事件刷新购物车。
因此，将自定义事件product:added代码替换为cart:refresh，并将注解代码更改为以下代码。

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

字符串
我希望这对你有帮助。

赞(0）回复(0）举报 2023-08-02

kmb7vmvb2#

function onQuickBuyButtonClicked(id, pro_id) {
    const CartCount = document.getElementsByClassName('Header__CartCount')[0];

    $(".loader_" + id).addClass("add-success--adding");
    const product = {
        id: id,
        quantity: 1
    };

    $.ajax({
        type: 'POST',
        url: '/cart/add.js',
        data: JSON.stringify(product),
        dataType: 'json',
        headers: {
            'Content-Type': 'application/json'
        },
        success: function(cart) {
            setTimeout(function() {
                $(".loader_" + id).removeClass("add-success--adding");
                $(".loader_" + id).addClass("add-success--added");
    //            cartRecommended(pro_id);
            }, 500);

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

            setTimeout(function() {
                $(".loader_" + id).removeClass("add-success--adding").removeClass("add-success--added");

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

            var r = jQuery.parseJSON(errorThrown.responseText);
            $(".error_" + pro_id).html("Error: " + r.description).show();
            setTimeout(function() {
                $(".error_" + pro_id).html("").hide(100);
            }, 3000);
        }
    });
    return false;
}

// Listen for the 'cart:refresh' event and update the cart count
document.addEventListener('cart:refresh', function() {
    $.getJSON('/cart.js', function(cart) {
        const cartCount = cart.item_count || 0;
        const CartCount = document.getElementsByClassName('Header__CartCount')[0];
        if (CartCount) {
            CartCount.innerHTML = cartCount;
        }
    });
});

字符串

赞(0）回复(0）举报 2023-08-02

我来回答

javascript 将项目添加到购物车后计数器不递增

2条答案

相关问题

热门标签

最新问答