Woocommerce中jQuery批量添加商品至购物车失效问题排查

问题分析 #

你当前的实现通过循环发送独立AJAX请求添加商品，但出现了部分商品无法加入购物车的问题——即使所有请求的success回调都触发，实际购物车却只收到部分商品。

核心原因是Woocommerce购物车依赖PHP Session存储数据，而PHP的文件session默认是加锁的：当一个请求正在写入session时，其他请求会等待锁释放。如果多个AJAX请求并发发送，后续请求可能在session锁释放前就完成了，导致它们的购物车更新操作无法正确写入session，最终丢失数据。

解决方案 #

方案1：合并为单个批量请求（推荐） #

将所有需要添加的商品数据收集起来，通过一次AJAX请求提交给后端，由后端串行处理添加操作，彻底避免session并发冲突。

前端代码修改

$('.add-products').on('click', function() {
    const productsToAdd = [];
    $('.product-qty').each(function() {
        const qty = parseInt($(this).val(), 10);
        if (qty > 0) {
            const pid = $(this).closest('.product-select').attr('product-id');
            productsToAdd.push({
                product_id: pid,
                qty: qty
            });
        }   
    });

    if (productsToAdd.length === 0) return;

    $.ajax({
        type: "POST",
        url: '/wp-admin/admin-ajax.php',
        data: {
            action: 'batch_add_to_cart',
            products: productsToAdd
        },
        success: function(response) {
            console.log('批量添加完成:', response);
            // 这里可以添加购物车UI更新逻辑
        },
        error: function(xhr, status, error) {
            console.error('批量添加失败:', error);
        }
    });
});

后端AJAX处理函数（添加到主题functions.php）

add_action('wp_ajax_batch_add_to_cart', 'handle_batch_add_to_cart');
add_action('wp_ajax_nopriv_batch_add_to_cart', 'handle_batch_add_to_cart');

function handle_batch_add_to_cart() {
    // 验证请求数据
    if (!isset($_POST['products']) || !is_array($_POST['products'])) {
        wp_send_json_error('无效的商品数据');
    }

    $addedProducts = [];
    $failedProducts = [];

    foreach ($_POST['products'] as $productData) {
        $productId = absint($productData['product_id']);
        $qty = absint($productData['qty']);

        // 验证商品有效性和数量
        if ($qty <= 0 || !wc_get_product($productId)) {
            $failedProducts[] = $productId;
            continue;
        }

        // 添加到购物车
        $cartItemKey = WC()->cart->add_to_cart($productId, $qty);
        if ($cartItemKey) {
            $addedProducts[] = [
                'product_id' => $productId,
                'qty' => $qty,
                'cart_item_key' => $cartItemKey
            ];
        } else {
            $failedProducts[] = $productId;
        }
    }

    // 返回处理结果
    wp_send_json_success([
        'added' => $addedProducts,
        'failed' => $failedProducts
    ]);
}

方案2：串行执行AJAX请求 #

如果不想修改后端代码，可以让前端逐个发送请求，确保前一个请求完成后再发送下一个，避免session锁冲突。

$('.add-products').on('click', function() {
    const productQueue = [];
    $('.product-qty').each(function() {
        const qty = parseInt($(this).val(), 10);
        if (qty > 0) {
            const pid = $(this).closest('.product-select').attr('product-id');
            productQueue.push({pid: pid, qty: qty});
        }   
    });

    // 递归处理队列
    function processQueue(index) {
        if (index >= productQueue.length) {
            console.log('所有商品处理完成');
            return;
        }
        const item = productQueue[index];
        $.ajax({
            type: "POST",
            url: '/wp-admin/admin-ajax.php',
            data: {action : 'add_to_cart', 'product_id': item.pid, 'qty': item.qty},
            success : function(response) {
                console.log(item.pid + ": " + item.qty);
                processQueue(index + 1);
            }, error : function(response) {
                console.error('添加失败:', item.pid);
                processQueue(index + 1);
            }
        });
    }

    if (productQueue.length > 0) {
        processQueue(0);
    }
});

方案对比 #

• 批量请求方案：效率更高，仅需一次HTTP请求，后端统一处理结果，方便前端给用户反馈哪些商品成功/失败，是最优选择。
• 串行请求方案：无需修改后端，但请求总耗时更长，适合快速临时修复场景。

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