在WooCommerce中使用AJAX刷新/更新迷你购物车的实现问题

我来帮你搞定这个需求——既能在任意PHP位置插入购物车链接，又能在购物车商品变更时自动通过AJAX更新它。下面是完整的落地方案：

1. 基础购物车链接代码（可放在任意PHP位置） #

先写好能显示购物车链接、商品数量的核心代码，你可以把这段代码放到主题的模板文件（比如header.php、sidebar.php等）里任意你需要的位置：

<a class="cart-customlocation" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'View your shopping cart', 'text-domain' ); ?>">
    <?php
    $cart_count = WC()->cart->get_cart_contents_count();
    echo sprintf( _n( '%d item', '%d items', $cart_count, 'text-domain' ), $cart_count );
    ?> - <?php echo WC()->cart->get_cart_total(); ?>
</a>

代码小说明： #

• wc_get_cart_url()：自动获取购物车页面的URL，不用硬写路径
• WC()->cart->get_cart_contents_count()：实时获取购物车内商品总数量
• sprintf( _n(...) )：自动适配数量的单复数翻译，多语言场景也能用
• WC()->cart->get_cart_total()：显示购物车总金额（如果不需要可以直接删掉这部分）

2. 添加AJAX自动更新功能 #

WooCommerce自带了cart fragments机制，专门用来自动更新购物车相关内容，我们只需要把自定义的购物车链接加入到这个机制里就好：

第一步：在主题functions.php中添加PHP钩子 #

// 注册并本地化脚本，传递必要参数
add_action( 'wp_enqueue_scripts', 'custom_cart_fragment_script' );
function custom_cart_fragment_script() {
    // 注册自定义脚本，依赖WooCommerce自带的cart fragments脚本
    wp_enqueue_script( 'custom-cart-fragment', get_stylesheet_directory_uri() . '/js/custom-cart-fragment.js', array( 'jquery', 'wc-cart-fragments' ), '1.0', true );
    
    // 本地化脚本，传递ajax地址和验证密钥
    wp_localize_script( 'custom-cart-fragment', 'custom_cart_params', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'nonce'    => wp_create_nonce( 'custom_cart_nonce' )
    ) );
}

// 将自定义购物车链接加入到cart fragments更新列表
add_filter( 'woocommerce_add_to_cart_fragments', 'custom_cart_fragment_update' );
function custom_cart_fragment_update( $fragments ) {
    ob_start();
    ?>
    <a class="cart-customlocation" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'View your shopping cart', 'text-domain' ); ?>">
        <?php
        $cart_count = WC()->cart->get_cart_contents_count();
        echo sprintf( _n( '%d item', '%d items', $cart_count, 'text-domain' ), $cart_count );
        ?> - <?php echo WC()->cart->get_cart_total(); ?>
    </a>
    <?php
    $fragments['a.cart-customlocation'] = ob_get_clean();
    
    return $fragments;
}

第二步：创建前端JS文件 #

在主题目录下新建js/custom-cart-fragment.js文件，填入以下内容：

jQuery(document).ready(function($) {
    // 监听WooCommerce的购物车更新事件
    $(document.body).on('updated_cart_totals updated_wc_div', function() {
        // 触发cart fragments刷新，更新自定义购物车链接
        $(document.body).trigger('wc_fragment_refresh');
    });
});

功能逻辑： #

当用户添加商品到购物车、移除商品或者修改商品数量时，WooCommerce会自动触发updated_cart_totals或updated_wc_div事件，我们的JS代码监听这些事件后，会触发WooCommerce的片段刷新机制，自动更新自定义购物车链接的内容。

小提示 #

• 记得把代码中的text-domain替换成你的主题/插件的文本域，确保翻译功能正常
• 所有代码建议添加到子主题的functions.php或自定义插件中，避免主题更新导致代码丢失

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