Ecwid JS API购物车商品数量减少功能异常求助

核心问题 #

你的代码存在三个关键问题：

1. 减少数量时，product对象的qty未赋值（应该设为原数量减1，即5）；
2. 同步调用removeProduct和addProduct，忽略了这两个方法的异步特性，导致操作时序混乱；
3. 在操作内部绑定OnCartChanged事件，会重复注册监听，触发多次日志输出。

修正后的代码 #

Ecwid.OnAPILoaded.add(function() {
    // 先获取当前购物车数据，确定目标商品的数量和位置
    Ecwid.Cart.get(function(cart) {
        const targetItem = cart.items.find(item => item.product.id === 101);
        if (!targetItem) return;

        // 处理边界情况：数量为1时直接移除，无需再添加
        if (targetItem.quantity <= 1) {
            Ecwid.Cart.removeProduct(targetItem.index);
            return;
        }

        // 定义要添加的商品（数量为原数量-1）
        const productToAdd = {
            id: 101,
            qty: targetItem.quantity - 1,
            callback: function(success) {
                success && console.log("数量减少操作完成");
            }
        };

        // 异步串行执行：移除成功后再执行添加操作
        Ecwid.Cart.removeProduct(targetItem.index, function(success) {
            success && Ecwid.Cart.addProduct(productToAdd);
        });
    });

    // 只绑定一次购物车变更监听，避免重复触发
    Ecwid.OnCartChanged.add(function(cart) {
        console.log("当前购物车商品:", cart.items);
    });
});

关键改进点 #

• 异步操作串行化：利用removeProduct的回调函数，确保移除操作完成后再执行添加，彻底解决时序冲突问题；
• 动态获取商品信息：通过Ecwid.Cart.get实时获取购物车数据，动态计算要添加的数量，同时处理数量为1的边界场景；
• 事件监听单次注册：将OnCartChanged监听放在API加载完成的回调中，避免重复绑定导致多次日志输出；
• 补全必填属性：明确设置productToAdd的qty值，解决原代码中属性缺失的问题。

测试验证 #

修改后再次测试场景3（直接减少数量），控制台只会输出两次日志：一次是移除商品后的购物车状态，一次是添加商品后的最终状态，不会出现反复跳转的异常情况。

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