Woocommerce多品类AJAX加购时的Sweet Alert提示实现问询

我来帮你调整代码，实现两个品类的达标提示，同时解决重复提示的问题。核心思路是后端同时统计两个目标品类的商品数量并返回给前端，前端根据当前添加商品的所属品类来触发对应提示，并且通过标记避免重复触发已显示过的提示。

修改后的完整代码 #

后端PHP（添加到主题functions.php中） #

// Wordpress Ajax: 获取购物车中指定品类的商品数量
add_action( 'wp_ajax_nopriv_checking_items', 'checking_cart_items' );
add_action( 'wp_ajax_checking_items', 'checking_cart_items' );

function checking_cart_items() {
    if( isset($_POST['id']) && $_POST['id'] > 0 ){
        // 初始化两个品类的计数器
        $count_bags = 0;
        $count_shoes = 0;
        $product_id = $_POST['id'];
        
        // 遍历购物车统计各品类数量
        foreach ( WC()->cart->get_cart() as $cart_item ) {
            if ( has_term( 'bags', 'product_cat', $cart_item['product_id'] ) ) {
                $count_bags += $cart_item['quantity'];
            } elseif ( has_term( 'shoes', 'product_cat', $cart_item['product_id'] ) ) {
                $count_shoes += $cart_item['quantity'];
            }
        }

        // 获取当前添加商品的所属品类
        $added_category = '';
        if( has_term( 'bags', 'product_cat', $product_id ) ){
            $added_category = 'bags';
        } elseif( has_term( 'shoes', 'product_cat', $product_id ) ){
            $added_category = 'shoes';
        }

        // 返回JSON格式的数据，包含两个品类的数量和当前添加商品的品类
        echo json_encode([
            'bags_count' => $count_bags,
            'shoes_count' => $count_shoes,
            'added_category' => $added_category
        ]);
    }
    die(); // 避免服务器500错误
}

// 前端JS脚本
add_action( 'wp_footer', 'items_check' );
function items_check() {
    if(is_checkout()) return; // 结账页面不显示提示
?>
<script src="https://unpkg.com/sweetalert2@7.20.1/dist/sweetalert2.all.js"></script>
<script type="text/javascript">
jQuery( function($){
    // 检查wc_add_to_cart_params是否存在
    if ( typeof wc_add_to_cart_params === 'undefined' ) return false;

    // 记录已经显示过的提示品类，避免重复触发
    let shownAlerts = [];

    $(document.body).on( 'added_to_cart', function( event, fragments, cart_hash, $button ) {
        // 发起AJAX请求
        $.ajax({
            type: 'POST',
            url: wc_add_to_cart_params.ajax_url,
            dataType: 'json', // 指定接收JSON格式数据
            data: {
                'action': 'checking_items',
                'id' : $button.data( 'product_id' ) // 传递当前添加的商品ID
            },
            success: function (response) {
                console.log('响应数据:', response); // 测试用，可删除

                // 根据当前添加的品类判断是否触发提示
                if(response.added_category === 'bags' && response.bags_count === 5 && !shownAlerts.includes('bags')){
                    // 显示Bags达标提示
                    const toast = swal.mixin({
                        toast: true,
                        showConfirmButton: false,
                        timer: 3000
                    });
                    toast({
                        type: 'success',
                        title: '5件Bags商品已添加！'
                    });
                    shownAlerts.push('bags'); // 标记该品类提示已显示
                } else if(response.added_category === 'shoes' && response.shoes_count === 5 && !shownAlerts.includes('shoes')){
                    // 显示Shoes达标提示
                    const toast = swal.mixin({
                        toast: true,
                        showConfirmButton: false,
                        timer: 3000
                    });
                    toast({
                        type: 'success',
                        title: '5件Shoes商品已添加！'
                    });
                    shownAlerts.push('shoes'); // 标记该品类提示已显示
                }
            }
        });
    });
});
</script>
<?php }

关键修改说明 #

1. 后端PHP部分

   • 新增两个计数器分别统计Bags和Shoes的商品总数，遍历购物车时针对性累加数量
   • 获取当前添加商品的品类信息，随结果返回给前端，让前端知道触发检查的品类
   • 使用json_encode返回结构化JSON数据，方便前端解析多品类的统计结果

2. 前端JS部分

   • 添加shownAlerts数组，用来记录已经显示过提示的品类，彻底避免重复触发
   • 指定dataType: 'json'确保正确解析后端返回的结构化数据
   • 仅根据当前添加商品的品类进行达标检查，只触发对应品类的提示
   • 只有当品类数量达标且未显示过提示时，才弹出SweetAlert并标记该品类

这样修改后，就能完美满足你的三个场景需求：

• 场景1：添加Bags到5件时显示对应提示
• 场景2：添加Shoes到5件时显示对应提示
• 场景3：Bags已达标后，再添加Shoes到5件时，只显示Shoes的提示，不会重复显示Bags的提示

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