优化JavaScript jQuery迷你购物车更新脚本：同步数量问题

问题核心 #

你当前的脚本实现了购物车内商品数量、总价的无刷新更新，但迷你购物车数量未同步。直接修改span.count-number无效，原因是未等到购物车AJAX更新完成就操作元素，或是元素选择器匹配错误，也可能是迷你购物车会被主题的后续渲染覆盖。

修改后的完整脚本 #

add_action( 'wp_footer', 'cart_update_qty_with_minicart_sync' );

function cart_update_qty_with_minicart_sync() {
    if (is_cart()) :
    ?>
    <script type="text/javascript">
        jQuery('div.woocommerce').on('change', 'input.qty', function(){
            // 触发购物车更新按钮
            jQuery("[name='update_cart']").removeAttr("disabled").trigger("click");
            
            // 监听WooCommerce购物车更新完成的官方事件
            jQuery(document).on('updated_cart_totals', function() {
                // 计算购物车内所有商品的总数量
                let totalItemQty = 0;
                jQuery('input.qty').each(function() {
                    totalItemQty += parseInt(jQuery(this).val()) || 0;
                });
                
                // 更新迷你购物车数量，请根据实际页面元素调整选择器
                jQuery('span.count-number').text(totalItemQty);
                
                // 可选：同步迷你购物车总价（如果有需要）
                const cartTotalAmount = jQuery('.cart_totals .order-total .amount').text();
                jQuery('.mini-cart .cart-total-amount').text(cartTotalAmount);
            });
        });
    </script>
    <?php
    endif;
}

关键调整说明 #

• 利用updated_cart_totals事件：这是WooCommerce购物车AJAX更新完成后触发的官方事件，确保在购物车数据完全更新后再修改迷你购物车，避免数据不同步
• 计算总数量：遍历所有商品的数量输入框求和，而非仅取单个商品数量，适配多商品购物车场景
• 灵活调整选择器：如果span.count-number不是迷你购物车数量的正确元素，打开浏览器开发者工具（F12）定位对应元素，替换为正确的选择器即可

备选方案（若上述代码无效） #

如果主题的迷你购物车有独立的AJAX刷新逻辑，可尝试触发主题自带的迷你购物车刷新事件，示例如下：

// 替换为主题对应的迷你购物车刷新触发代码，比如部分主题用这个
jQuery(document.body).trigger('wc_fragment_refresh');

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