WooCommerce指定页面购物车商品数达5时触发Sweet Alert问题排查

先帮你梳理下现有代码的核心问题：

1. is_page('/leanshop/') 参数错误，应该用页面slug leanshop 而非带斜杠的路径；
2. 原逻辑仅在页面首次加载时判断条件，通过AJAX添加商品到5件时，PHP代码不会重新执行，导致弹窗逻辑无法触发；
3. 弹窗代码绑定在added_to_cart事件上，但事件触发时没有重新校验当前页面和购物车数量的匹配状态。

下面是修正后的完整代码，同时覆盖页面加载时的初始检查和AJAX添加后的实时校验场景：

add_action( 'wp_footer', 'items_in_cart_trigger' );
function items_in_cart_trigger() {
    // 仅在leanshop页面加载脚本，不符合直接返回
    if ( !is_page('leanshop') ) {
        return;
    }
    $target_cart_count = 5;
    ?>
    <script src="https://unpkg.com/sweetalert2@7.20.1/dist/sweetalert2.all.js"></script>
    <script type="text/javascript">
    (function($){
        // 封装购物车数量检查与弹窗逻辑
        function checkCartAndTriggerAlert(currentCount) {
            const targetCount = <?php echo $target_cart_count; ?>;
            if (currentCount === targetCount) {
                swal( 'You added all the items!', 'Proceed to checkout?', 'success');
            }
        }

        // 页面加载完成后，先做一次初始检查
        $(document).ready(function(){
            const initialCartCount = <?php echo WC()->cart->cart_contents_count; ?>;
            checkCartAndTriggerAlert(initialCartCount);
        });

        // AJAX添加商品后，实时获取最新购物车数量并检查
        $('body').on( 'added_to_cart', function() {
            $.ajax({
                url: wc_cart_params.ajax_url,
                type: 'POST',
                data: { action: 'fetch_latest_cart_count' },
                success: function(response) {
                    const latestCount = parseInt(response);
                    checkCartAndTriggerAlert(latestCount);
                }
            });
        });
    })(jQuery);
    </script>
    <?php
    // 注册AJAX接口，供前端获取实时购物车数量
    add_action( 'wp_ajax_fetch_latest_cart_count', 'return_latest_cart_count' );
    add_action( 'wp_ajax_nopriv_fetch_latest_cart_count', 'return_latest_cart_count' );
}

function return_latest_cart_count() {
    echo WC()->cart->cart_contents_count;
    wp_die(); // 必须终止AJAX请求
}

关键优化点说明： #

• 页面判断精准化：用is_page('leanshop')准确匹配目标页面，避免在其他页面加载冗余脚本；
• 初始状态校验：页面加载完成后立即检查购物车数量，若已达标直接触发弹窗；
• AJAX实时校验：绑定added_to_cart事件后，通过自定义AJAX请求获取最新购物车数量，确保判断的准确性；
• 逻辑封装复用：把弹窗触发逻辑封装成函数，避免重复代码，后续修改需求更方便。

如果你的WooCommerce版本较新，也可以尝试监听woocommerce_cart_updated事件来简化数量获取，但上述代码兼容性更强，适配多数版本的WooCommerce。

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