如何在WooCommerce中实现每5秒无刷新更新购物车数据？

你之前的代码不生效的核心原因是：wc_fragments_refreshed是WooCommerce购物车碎片更新完成后触发的通知类事件，本身不会发起AJAX请求拉取最新的购物车数据，自然不会更新页面内容。

1. 前端实现代码 #

将以下代码写入主题/子主题的自定义JS文件中即可：

(function( $ ) {
    'use strict';
    // 仅在购物车页面执行逻辑，避免全站发起无效请求
    if (!$('body').hasClass('woocommerce-cart')) return;

    $( document ).ready(function() {
        function refresh_cart_content() {
            console.log('刷新购物车数据');
            // 调用WooCommerce内置接口拉取最新购物车碎片
            $.get(wc_cart_params.ajax_url, {
                'action': 'woocommerce_get_refreshed_fragments'
            }, function(response) {
                if (!response || !response.fragments) return;
                // 批量更新页面上的购物车相关DOM
                $.each(response.fragments, function(selector, html) {
                    $(selector).replaceWith(html);
                });
                // 触发更新完成事件，兼容其他绑定的购物车逻辑
                $(document.body).trigger('wc_fragments_refreshed');
            });
        }
        // 页面加载完成先执行一次刷新
        refresh_cart_content();
        // 每5秒执行一次刷新
        setInterval(refresh_cart_content, 5000);
    });
})(jQuery);

2. 兼容自定义主题的补充配置 #

如果你的主题自定义了购物车页面结构，默认碎片没有覆盖商品价格展示区域，可以在主题functions.php中添加以下代码注册自定义碎片：

add_filter('woocommerce_add_to_cart_fragments', function($fragments) {
    ob_start();
    // 加载购物车商品列表模板
    wc_get_template('cart/cart.php');
    $fragments['.woocommerce-cart-form'] = ob_get_clean();
    return $fragments;
});

3. 注意事项 #

• 购物车页面默认会加载WooCommerce全局变量wc_cart_params，无需额外配置
• 可根据需要增加数据对比逻辑，仅在商品价格、数量等信息发生变化时再替换DOM，降低性能消耗

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