已有迷你购物车重复添加拦截代码，如何为已购商品HTML元素加disabled类？

嘿，看你已经搞定了阻止重复添加商品到迷你购物车的功能，现在要给已在购物车里的商品对应的HTML元素加上disabled类对吧？我来给你梳理几个靠谱的实现方案，适配不同场景～

我们可以从后端PHP渲染和前端JS动态更新两个层面来处理，同时整合你已有的阻止重复添加逻辑，让用户体验更完整。

1. 先写个通用辅助函数（核心判断逻辑） #

先封装一个函数，用来快速检查某个商品是否已经在购物车里，方便后续多处调用：

// 辅助函数：检查指定商品是否在购物车中（支持变体商品）
function is_product_in_cart( $product_id ) {
    if ( empty( WC()->cart ) ) return false;
    
    foreach ( WC()->cart->get_cart() as $cart_item ) {
        $cart_product_id = $cart_item['product_id'];
        // 同时检查变体商品的父ID，避免漏判
        if ( $product_id == $cart_product_id || $product_id == $cart_item['data']->get_parent_id() ) {
            return true;
        }
    }
    return false;
}

2. 后端PHP渲染时直接添加disabled类 #

场景A：单个商品详情页的添加按钮 #

通过WooCommerce的钩子修改按钮HTML，直接给已在购物车的商品按钮加类：

add_filter( 'woocommerce_product_add_to_cart_button', 'add_disabled_class_single_product_button', 10, 2 );
function add_disabled_class_single_product_button( $button_html, $product ) {
    if ( is_product_in_cart( $product->get_id() ) ) {
        // 给按钮添加disabled类
        $button_html = str_replace( 'button', 'button disabled', $button_html );
        // 可选：把按钮文本改成"已在购物车"，更直观
        $button_html = str_replace( $product->single_add_to_cart_text(), '已在购物车', $button_html );
    }
    return $button_html;
}

场景B：商品列表/循环页的添加按钮 #

同理，修改列表页的按钮样式：

add_filter( 'woocommerce_loop_add_to_cart_link', 'add_disabled_class_loop_product_button', 10, 2 );
function add_disabled_class_loop_product_button( $button_html, $product ) {
    if ( is_product_in_cart( $product->get_id() ) && $product->is_purchasable() ) {
        $button_html = str_replace( 'button', 'button disabled', $button_html );
        $button_html = str_replace( $product->add_to_cart_text(), '已在购物车', $button_html );
    }
    return $button_html;
}

3. 前端JS动态更新（适配AJAX购物车场景） #

如果你的迷你购物车支持AJAX添加/删除商品，页面不刷新的话，需要前端实时更新按钮状态，避免状态不一致：

jQuery(document).ready(function($) {
    // 定义更新按钮状态的函数
    function updateAddToCartButtons() {
        var cartProductIds = [];
        // 从WooCommerce全局对象获取购物车中的商品ID
        if ( typeof wc_cart_params !== 'undefined' ) {
            $.each(wc_cart_params.cart_items, function(key, item) {
                cartProductIds.push(item.product_id);
                // 变体商品也加入ID
                if ( item.variation_id ) {
                    cartProductIds.push(item.variation_id);
                }
            });
        }

        // 遍历所有添加按钮，更新状态
        $('.add_to_cart_button').each(function() {
            var productId = $(this).data('product_id');
            if ( cartProductIds.includes(productId) ) {
                $(this).addClass('disabled').text('已在购物车');
            } else {
                $(this).removeClass('disabled').text('加入购物车');
            }
        });
    }

    // 页面加载时初始化状态
    updateAddToCartButtons();

    // 监听购物车AJAX更新事件（添加/删除商品后自动更新）
    $(document).on('added_to_cart removed_from_cart', function() {
        setTimeout(updateAddToCartButtons, 300); // 延迟执行确保购物车数据同步
    });
});

4. 完善你已有的阻止重复添加函数 #

你原来的函数里有一段代码没写完，这里帮你补全并优化逻辑，确保和按钮状态联动：

// 阻止重复添加商品到迷你购物车
function check_if_cart_has_product( $valid, $product_id, $quantity ) {
    if( !empty(WC()->cart->get_cart()) && $valid ){
        foreach (WC()->cart->get_cart() as $cart_item_key => $values) {
            $_product = $values['data'];
            if( $product_id == $_product->get_id() ) {
                unset(WC()->cart->cart_contents[$cart_item_key]);
                wc_add_notice( '该商品已在购物车中，无需重复添加', 'notice' );
                $valid = false; // 阻止本次添加操作
                break;
            }
        }
    }
    return $valid;
}
add_filter( 'woocommerce_add_to_cart_validation', 'check_if_cart_has_product', 10, 3 );

这样不管用户是点击了已加disabled类的按钮（误操作），还是通过其他途径尝试添加，都会有提示并阻止重复添加，体验更流畅。

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