WooCommerce清空购物车页面刷新后短码滑块加载异常求助

问题根源 #

移除购物车商品时，页面通过AJAX动态刷新空购物车内容，但商品滑块的初始化脚本仅在页面首次加载时执行，动态插入的滑块元素未被重新触发初始化，导致无限加载转圈；手动刷新时页面完全重新渲染，脚本正常执行，滑块即可加载成功。

解决方案 #

1. 调整PHP钩子与输出逻辑 #

将原钩子替换为更贴合场景的woocommerce_empty_cart_message，同时用输出缓冲优化内容输出时序：

add_action( 'woocommerce_empty_cart_message', 'custom_empty_cart_message', 10 );

function custom_empty_cart_message() {
    ob_start();
    ?>
    <h1 class="woocommerce-cart-title">Cart</h1>
    <div class="cart-empty">
        <p class="cart-empty cart-empty_text">Your cart is currently empty.</p>
        <img fetchpriority="high" decoding="async" width="540" height="540" src="https://myurl.com/wp-content/uploads/2024/04/empty_bento.jpeg" alt="empty_bento" class="empty_bento" sizes="(max-width: 740px) 100vw, 740px">
    </div>
    <?php echo do_shortcode( '[woo_product_slider id="2994"]' );
    return ob_get_clean();
}

2. 添加AJAX后滑块初始化脚本 #

在主题functions.php中加入以下代码，监听WooCommerce购物车更新事件，手动触发滑块初始化：

add_action( 'wp_footer', 'reinitialize_empty_cart_slider' );

function reinitialize_empty_cart_slider() {
    if ( is_cart() ) {
    ?>
    <script>
        document.addEventListener('wc_cart_updated', function() {
            const sliderContainer = document.querySelector('.woo-product-slider');
            if (sliderContainer) {
                // 优先调用滑块插件的官方初始化函数，示例函数名需根据实际插件调整
                if (typeof wooProductSliderInit === 'function') {
                    wooProductSliderInit(sliderContainer);
                }
                // 若不确定初始化函数，可触发resize事件（部分插件会监听此事件重新初始化）
                window.dispatchEvent(new Event('resize'));
            }
        });
    </script>
    <?php
    }
}

3. 备选方案：禁用AJAX购物车更新（不推荐） #

如果上述方法无效，可临时关闭购物车的AJAX更新，让页面完全刷新：

add_filter( 'woocommerce_cart_item_remove_link', 'disable_ajax_cart_remove', 10, 2 );

function disable_ajax_cart_remove( $link, $cart_item_key ) {
    $link = str_replace( 'ajax_remove=1', '', $link );
    return $link;
}

注意事项 #

• 替换JS中的.woo-product-slider为你使用的商品滑块插件实际容器类名
• 优先使用插件官方提供的初始化API，避免依赖resize事件的兼容性问题
• 可通过浏览器控制台查看是否有JS报错，排查脚本冲突问题

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