WooCommerce实时产品搜索无结果问题排查与修复

你的代码存在几个关键问题，导致添加分类筛选后搜索失效：

• 前端JS未将分类勾选状态传递给后端AJAX接口
• 后端查询中分类字段用了slug，但前端传的是分类ID（term_id），参数不匹配
• 无分类勾选时，tax_query仍会强制筛选空值，导致无结果
• 搜索框为空时不触发查询，无法展示分类筛选后的产品

下面是完整的修复代码：

修改后的PHP代码 #

function realtime_product_search_enqueue_scripts() {
    wp_enqueue_script('realtime-product-search', plugin_dir_url(__FILE__) . 'realtime-product-search.js', array('jquery'), '1.0', true);
    wp_localize_script('realtime-product-search', 'realtime_product_search_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'realtime_product_search_enqueue_scripts');

// AJAX callback function for product search
function realtime_product_search_callback() {
    $search_term = sanitize_text_field($_POST['search_term']);
    // 接收分类数组，默认空数组
    $category_filter = isset($_POST['category_filter']) ? array_map('absint', $_POST['category_filter']) : array();

    $args = array(
        'post_type' => 'product',
        's' => $search_term,
        'posts_per_page' => 10,
    );

    // 只有当有分类被勾选时，才添加tax_query条件
    if (!empty($category_filter)) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'product_cat',
                'field' => 'id', // 匹配前端传递的term_id
                'terms' => $category_filter,
                'operator' => 'IN',
            ),
        );
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            global $product;
            $product_id = get_the_ID();
            
            // 输出产品信息
            echo '<div class="product">';
            echo '<h2>' . get_the_title($product_id) . '</h2>';
            echo '<div class="product-thumbnail">' . $product->get_image() . '</div>';
            echo '<div class="product-add-to-cart">' . $product->add_to_cart_button() . '</div>';
            echo '</div>';
        }
    } else {
        echo '<p>No products found.</p>';
    }

    wp_reset_postdata();
    die();
}

add_action('wp_ajax_realtime_product_search', 'realtime_product_search_callback');
add_action('wp_ajax_nopriv_realtime_product_search', 'realtime_product_search_callback');

// 短代码实现
function realtime_product_search_shortcode() {
    ob_start();

    // 获取产品分类
    $categories = get_terms(array(
        'taxonomy' => 'product_cat',
        'hide_empty' => true,
    ));

    ?>
    <div class="realtime-product-search">
        <input type="text" id="product-search" placeholder="Search for products..." />
        <div id="category-filter">
            <h4>Filter by Category:</h4>
            <?php foreach ($categories as $category) : ?>
                <label>
                    <input type="checkbox" name="category_filter[]" value="<?php echo $category->term_id; ?>" />
                    <?php echo $category->name; ?>
                </label>
            <?php endforeach; ?>
        </div>
        <div id="search-results"></div>
    </div>
    <?php

    return ob_get_clean();
}
add_shortcode('realtime_product_search', 'realtime_product_search_shortcode');

修改后的JS代码 #

jQuery(document).ready(function ($) {
    var typingTimer;
    var doneTypingInterval = 500; // AJAX请求延迟时间（毫秒）

    // 监听搜索框输入和分类复选框变化，都触发搜索
    $('#product-search').on('input', triggerSearch);
    $('input[name="category_filter[]"]').on('change', triggerSearch);

    function triggerSearch() {
        clearTimeout(typingTimer);
        typingTimer = setTimeout(realtimeProductSearch, doneTypingInterval);
    }

    function realtimeProductSearch() {
        var search_term = $('#product-search').val();
        // 收集所有勾选的分类ID
        var category_filter = $('input[name="category_filter[]"]:checked').map(function() {
            return $(this).val();
        }).get();

        $.ajax({
            url: realtime_product_search_ajax.ajax_url,
            type: 'post',
            data: {
                action: 'realtime_product_search',
                search_term: search_term,
                category_filter: category_filter // 传递分类参数
            },
            success: function (response) {
                $('#search-results').html(response);
            }
        });
    }

    // 页面加载时默认执行一次搜索，展示所有产品（可选）
    realtimeProductSearch();
});

关键修复点说明 #

• 参数传递：JS新增分类复选框监听，收集勾选的分类ID并传给后端
• 字段匹配：后端tax_query的field改为id，和前端传递的term_id对应
• 条件判断：仅当有分类勾选时才添加tax_query，避免无分类时的空筛选
• 触发逻辑：搜索框输入和分类变化都触发搜索，且搜索框为空时也允许查询

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