WooCommerce添加购物车Ajax更新顶部迷你购物车商品数量问题

嘿，我来帮你搞定WooCommerce迷你购物车的Ajax实时更新问题！针对你说的捆绑产品加购后购物车显示4件商品的场景，咱们分几步来实现：

一、添加后端Ajax处理函数 #

首先要在主题的functions.php文件里注册Ajax回调，用来计算并返回最新的购物车总商品数量：

// 注册Ajax动作，支持登录和未登录用户
add_action( 'wp_ajax_update_mini_cart_quantity', 'update_mini_cart_quantity_callback' );
add_action( 'wp_ajax_nopriv_update_mini_cart_quantity', 'update_mini_cart_quantity_callback' );

function update_mini_cart_quantity_callback() {
    // 确保WooCommerce购物车已初始化
    if ( ! WC()->cart ) {
        wp_send_json_error( '购物车未初始化' );
    }

    // 计算购物车总商品数量（和你现有逻辑一致）
    $total_products = 0;
    foreach ( WC()->cart->get_cart() as $cart_item ) {
        $total_products += $cart_item['quantity'];
    }

    // 返回成功结果和数量
    wp_send_json_success( array( 'quantity' => $total_products ) );
}

二、调整迷你购物车的HTML结构 #

把你现有的迷你购物车代码修改一下，给数量显示元素加个唯一ID，方便后续前端JS定位替换：

<?php
$total_products = 0;
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
    $total_products += $cart_item['quantity'];
}
?>
<div class="shopping-cart-header">
    <!-- 给数量元素添加唯一ID，方便JS更新 -->
    <span id="mini-cart-total-quantity"><?php echo esc_html( $total_products ); ?></span> 件商品
</div>

三、添加前端Ajax脚本 #

接下来添加前端JS代码，监听添加到购物车的按钮点击事件，发送Ajax请求获取最新数量并更新页面：

jQuery(document).ready(function($) {
    // 监听所有添加到购物车的按钮点击
    $(document).on('click', '.single_add_to_cart_button, .add_to_cart_button, .bundle_add_to_cart', function(e) {
        var $button = $(this);
        
        // 针对捆绑产品按钮，先阻止默认提交逻辑
        if ($button.hasClass('bundle_add_to_cart')) {
            e.preventDefault();
            
            // 获取产品ID和购买数量（按需调整选择器）
            var productId = $button.data('product_id');
            var quantity = $button.siblings('.quantity').find('input.qty').val() || 1;
            
            // 发送Ajax请求更新数量
            $.ajax({
                url: wc_add_to_cart_params.ajax_url,
                type: 'POST',
                data: {
                    action: 'update_mini_cart_quantity',
                    product_id: productId,
                    quantity: quantity
                },
                success: function(response) {
                    if (response.success) {
                        // 更新迷你购物车的数量显示
                        $('#mini-cart-total-quantity').text(response.data.quantity);
                        // 可选：触发WooCommerce内置的购物车刷新事件，同步其他购物车片段
                        $(document).trigger('wc_fragment_refresh');
                    }
                },
                error: function() {
                    console.log('更新迷你购物车数量失败，请检查后端代码');
                }
            });
        } else {
            // 普通产品，监听WooCommerce内置的"添加成功"事件
            $(document).on('added_to_cart', function() {
                $.ajax({
                    url: wc_add_to_cart_params.ajax_url,
                    type: 'POST',
                    data: { action: 'update_mini_cart_quantity' },
                    success: function(response) {
                        if (response.success) {
                            $('#mini-cart-total-quantity').text(response.data.quantity);
                        }
                    }
                });
            });
        }
    });
});

四、额外注意事项 #

• 确保加载WooCommerce Ajax参数：如果你的主题没有自动加载wc_add_to_cart_params，可以在functions.php里添加以下代码：

add_action( 'wp_enqueue_scripts', 'enqueue_woocommerce_ajax_params' );
function enqueue_woocommerce_ajax_params() {
    wp_localize_script( 'jquery', 'wc_add_to_cart_params', array(
        'ajax_url' => admin_url( 'admin-ajax.php' )
    ) );
}

• 调整按钮类名：如果你的捆绑产品插件使用的按钮类不是.bundle_add_to_cart，请替换成插件实际的按钮类名。
• 清除缓存：测试前记得清除浏览器缓存和网站缓存，避免旧代码干扰结果。

内容的提问来源于stack exchange，提问作者Abdullah Al Faruk