Woocommerce：Ajax移除/撤销移除购物车商品后显示自定义文本

后端：在Ajax响应中注入自定义提示数据 #

WooCommerce的购物车移除/恢复商品操作均通过Ajax完成，响应会返回页面刷新片段。我们可以利用woocommerce_ajax_get_refreshed_fragments钩子，在响应里加入自定义的提示文本和样式类，供前端调用：

add_filter('woocommerce_ajax_get_refreshed_fragments', 'add_custom_cart_notice_to_ajax_response');
function add_custom_cart_notice_to_ajax_response($fragments) {
    $cart_items = WC()->cart->get_cart();
    $has_collection_item = false;

    // 替换为你的实际判断逻辑：检查购物车是否包含需要自提的商品
    foreach ($cart_items as $item) {
        if ($item['product_id'] === 123) { // 示例：商品ID为123时触发自提提示
            $has_collection_item = true;
            break;
        }
    }

    // 根据判断结果生成提示内容和样式类
    if ($has_collection_item) {
        $notice_text = 'Order Delivery Type: Collection Only';
        $notice_class = 'cart-notice collection-only';
    } else {
        $notice_text = 'Order Delivery Type: Standard Delivery';
        $notice_class = 'cart-notice standard-delivery';
    }

    // 将提示容器的HTML片段加入响应
    $fragments['#cart-notice-container'] = sprintf(
        '<div id="cart-notice-container" class="%s">%s</div>',
        esc_attr($notice_class),
        esc_html($notice_text)
    );
    // 单独传递JSON格式的原始数据，方便前端灵活处理
    $fragments['custom_cart_notice'] = json_encode([
        'text' => $notice_text,
        'class' => $notice_class
    ]);

    return $fragments;
}

前端：监听Ajax事件并更新提示区域 #

WooCommerce提供了多个购物车相关的Ajax事件，updated_cart会在移除/恢复商品操作完成后触发，我们可以监听这个事件，从响应片段中提取数据更新woocommerce_before_cart_contents区域：

jQuery(document).ready(function($) {
    // 监听购物车更新完成事件
    $(document).on('updated_cart', function(event, fragments) {
        if (fragments.custom_cart_notice) {
            const noticeData = JSON.parse(fragments.custom_cart_notice);
            const $noticeArea = $('.woocommerce_before_cart_contents');
            
            // 如果提示容器不存在，先创建
            if (!$noticeArea.find('#cart-notice-container').length) {
                $noticeArea.prepend('<div id="cart-notice-container"></div>');
            }
            
            // 更新提示文本和样式类
            $('#cart-notice-container').text(noticeData.text).attr('class', noticeData.class);
        }
    });

    // 单独监听移除/恢复事件做针对性处理
    $(document).on('removed_cart_item restored_cart_item', function(event, fragments) {
        updateCartNotice(fragments);
    });

    // 封装更新逻辑，避免重复代码
    function updateCartNotice(fragments) {
        if (fragments.custom_cart_notice) {
            const noticeData = JSON.parse(fragments.custom_cart_notice);
            $('#cart-notice-container').text(noticeData.text).attr('class', noticeData.class);
        }
    }
});

样式设置（自定义提示栏颜色） #

根据后端定义的样式类，添加CSS来设置不同状态的提示栏颜色：

.cart-notice {
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    color: #fff;
}

.cart-notice.collection-only {
    background-color: #e74c3c; /* 红色背景，提示自提 */
}

.cart-notice.standard-delivery {
    background-color: #2ecc71; /* 绿色背景，提示标准配送 */
}

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