OpenCart 3.0.3.8中能否用JavaScript AJAX更新购物车商品数量？

问题背景 #

我尝试为购物车添加加减按钮来增减商品数量，用cart.add()加商品很简单，但减数量的时候遇到了麻烦。官方的cart.update()函数没法正常工作，想知道能不能用AJAX来实现购物车更新，以及具体怎么做。

下面是那个无法正常工作的cart.update()函数：

var cart = {
    'update': function(key, quantity) {
        $.ajax({
            url: 'index.php?route=checkout/cart/edit',
            type: 'post',
            data: 'key=' + key + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
            dataType: 'json',
            beforeSend: function() {
                $('#cart > button').button('loading');
            },
            complete: function() {
                $('#cart > button').button('reset');
            },
            success: function(json) {
                // 加延迟才能更新总数
                setTimeout(function () {
                    $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
                }, 100);

                if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
                    location = 'index.php?route=checkout/cart';
                } else {
                    $('#cart > ul').load('index.php?route=common/cart/info ul li');
                }
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
    },
}

解决方案：修复AJAX更新购物车功能 #

当然可以用AJAX实现购物车数量更新，下面是修复后的方案：

1. 前端按钮绑定 #

先给加减按钮绑定点击事件，假设每个商品项有这样的结构：

<div class="cart-item">
    <input type="hidden" class="cart-key" value="商品对应的key">
    <button class="btn-decrease">-</button>
    <input type="number" class="quantity" value="1" min="1">
    <button class="btn-increase">+</button>
</div>

然后添加JS事件监听：

$(document).on('click', '.btn-increase, .btn-decrease', function() {
    var $item = $(this).closest('.cart-item');
    var key = $item.find('.cart-key').val();
    var currentQty = parseInt($item.find('.quantity').val());
    var newQty = $(this).hasClass('btn-increase') ? currentQty + 1 : currentQty - 1;

    // 数量不能小于1
    if (newQty < 1) newQty = 1;

    // 调用修复后的update函数
    cart.update(key, newQty);
});

2. 修复cart.update()函数 #

原函数的问题主要在数据传递和响应处理上，修复后的版本：

var cart = {
    'update': function(key, quantity) {
        $.ajax({
            url: 'index.php?route=checkout/cart/edit',
            type: 'POST',
            // 改用对象形式传递数据，避免编码问题
            data: {
                key: key,
                quantity: quantity || 1
            },
            dataType: 'json',
            beforeSend: function() {
                $('#cart > button').addClass('loading');
            },
            complete: function() {
                $('#cart > button').removeClass('loading');
            },
            success: function(json) {
                // 处理错误提示（如果后端返回错误）
                if (json.error) {
                    alert(json.error);
                    return;
                }

                // 更新购物车按钮显示的总数
                $('#cart-total').html('<i class="fa fa-shopping-cart"></i> ' + json.total);

                // 更新当前商品项的数量输入框
                $('.cart-key[value="' + key + '"]').closest('.cart-item').find('.quantity').val(quantity);

                // 如果在购物车或结算页面，刷新页面；否则更新下拉购物车列表
                var currentRoute = getURLVar('route');
                if (currentRoute === 'checkout/cart' || currentRoute === 'checkout/checkout') {
                    location.reload();
                } else {
                    $('#cart > ul').load('index.php?route=common/cart/info ul li', function() {
                        // 加载完成后可以做额外处理
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('购物车更新失败:', error, xhr.responseText);
                alert('购物车更新失败，请稍后重试');
            }
        });
    },
    // 保留原有的add函数
    'add': function(product_id, quantity) {
        // 原add函数逻辑不变
    }
}

3. 后端验证（可选但推荐） #

确保checkout/cart/edit控制器能正确处理数量更新，比如验证数量是否为正整数，库存是否充足等。如果后端返回错误信息，前端可以捕获并提示用户。

关键修复点 #

• 改用对象形式传递AJAX数据，避免字符串拼接导致的编码问题
• 增加错误处理逻辑，捕获后端返回的错误提示
• 直接更新当前商品的数量输入框，提升用户体验
• 优化加载状态的处理（用类代替button('loading')，避免依赖特定插件）

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