Ajax WooCommerce添加购物车验证时Sweet Alert无法触发问题

我来帮你拆解问题根源，再给出可行的解决办法：

问题核心原因 #

你的代码逻辑卡在了「服务器端钩子」和「前端AJAX流程」的不匹配上：

• 服务器端输出的JS无法被AJAX响应执行：woocommerce_add_to_cart_validation是纯服务器端运行的钩子，当商店页面用AJAX添加商品时，浏览器只会接收AJAX请求返回的JSON数据，不会自动把你输出的<script>标签插入到页面DOM里执行。
• 破坏了AJAX响应格式：WooCommerce的AJAX添加购物车默认返回JSON格式的响应，你直接输出JS代码会打乱这个格式，导致前端无法正确解析响应内容，弹窗自然不会触发。

正确的实现方案 #

我们需要把「服务器端验证」和「前端弹窗触发」分开处理：

第一步：修改服务器端验证逻辑，返回错误提示 #

保留验证逻辑，但不再输出JS，而是用WooCommerce自带的通知函数传递错误信息，确保AJAX请求能捕获到验证失败的状态：

// 禁用错误后跳转
add_filter( 'woocommerce_cart_redirect_after_error', '__return_false');

add_action( 'woocommerce_add_to_cart_validation', 'restrict_items_in_cart', 10, 3 );
function restrict_items_in_cart( $passed, $product_id, $quantity ) {
    // 获取当前购物车商品数量
    $item_count = WC()->cart->get_cart_contents_count();
    
    // 验证条件：购物车已有商品则阻止添加
    if( $item_count >= 1 ){
        // 添加错误提示，这个信息会被AJAX响应携带
        wc_add_notice( __('TOO MANY ITEMS! Want to change?', 'text-domain'), 'error' );
        $passed = false; // 返回false阻止商品加入购物车
    }
    
    return $passed;
}

第二步：前端监听AJAX事件，触发Sweet Alert #

通过WooCommerce提供的前端JS事件，监听AJAX添加购物车的结果，再触发弹窗：
首先确保Sweet Alert脚本正确加载（推荐在主题的functions.php里注册）：

add_action( 'wp_enqueue_scripts', 'enqueue_sweetalert' );
function enqueue_sweetalert() {
    wp_enqueue_script( 'sweetalert', 'https://unpkg.com/sweetalert2@7.20.1/dist/sweetalert2.all.js', array('jquery'), '7.20.1', true );
}

然后添加前端监听代码（可以放在主题的自定义JS文件里，或者通过wp_add_inline_script添加）：

// 监听AJAX添加购物车失败的事件
jQuery(document).on('wc_add_to_cart_failed', function(event, product_id, quantity) {
    // 获取WooCommerce的错误提示文本
    var errorText = jQuery('.woocommerce-error').text();
    if(errorText.includes('TOO MANY ITEMS!')){
        // 触发Sweet Alert弹窗
        swal( 'TOO MANY ITEMS!', 'Want to change?', 'error');
        // 移除默认的错误提示框，避免重复显示
        jQuery('.woocommerce-error').remove();
    }
});

额外注意点 #

• 不要在服务器端钩子里直接输出HTML/JS，保持AJAX响应的JSON格式完整性是关键。
• WooCommerce还提供了added_to_cart（添加成功后触发）等其他AJAX相关事件，可以根据你的需求灵活调整监听逻辑。

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