WooCommerce: как исправить не работающий AJAX-фильтр по иерархии категорий

Диагностика проблемы с AJAX-фильтром категорий

Проблема с неработающим AJAX-фильтром по иерархии категорий в WooCommerce часто проявляется так: при выборе подкатегории фильтр не обновляет список товаров без перезагрузки страницы или вовсе игнорирует выбранный параметр. Это приводит к плохому UX и снижению конверсии. Основные причины связаны с неправильной обработкой AJAX-запросов, отсутствием поддержки вложенных категорий в фильтрах и конфликтами с темами или плагинами.

Как проверить, что фильтр не работает корректно

• Откройте страницу магазина с AJAX-фильтром категорий.
• Выберите родительскую категорию — товары фильтруются корректно?
• Выберите вложенную подкатегорию — происходит ли обновление товаров без полной перезагрузки страницы?
• Проверьте консоль браузера на наличие JS-ошибок (Ctrl+Shift+J).
• Проверьте сетевые запросы в DevTools (вкладка Network) — отправляются ли AJAX-запросы при выборе подкатегории?

Пошаговое решение проблемы

1. Убедитесь, что фильтр поддерживает иерархию категорий

Стандартные WooCommerce виджеты не всегда корректно обрабатывают иерархические категории для AJAX. Рекомендуется использовать плагины фильтров с поддержкой иерархии, например, Clearfy Pro или WooCommerce Product Filters.

2. Добавьте поддержку AJAX для вложенных категорий вручную

Если используете кастомный фильтр, добавьте обработку AJAX-запросов для вложенных категорий. Пример обработки запроса:

add_action('wp_ajax_filter_products_by_category', 'filter_products_by_category_callback');
add_action('wp_ajax_nopriv_filter_products_by_category', 'filter_products_by_category_callback');

function filter_products_by_category_callback() {
    $category_slug = sanitize_text_field($_POST['category_slug']);

    $args = [
        'post_type' => 'product',
        'posts_per_page' => 12,
        'tax_query' => [[
            'taxonomy' => 'product_cat',
            'field' => 'slug',
            'terms' => $category_slug,
            'include_children' => true,
        ]],
    ];

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            wc_get_template_part('content', 'product');
        }
    } else {
        echo '<p>Товары не найдены</p>';
    }
    wp_die();
}

В JS нужно отправлять AJAX-запрос с выбранным слагом категории:

jQuery(document).on('change', '.category-filter-select', function() {
    var categorySlug = jQuery(this).val();
    jQuery.ajax({
        url: wc_params.ajax_url,
        type: 'POST',
        data: {
            action: 'filter_products_by_category',
            category_slug: categorySlug
        },
        success: function(response) {
            jQuery('.products-grid').html(response);
        }
    });
});

3. Проверьте тему и плагины на конфликты

Отключите другие плагины и переключитесь на стандартную тему Storefront или Reboot от WPShop (Reboot) для проверки работоспособности фильтра. Если проблема исчезает, ищите конфликт поочередным включением плагинов.

Проверка результата после внедрения

• Выберите родительскую и вложенную категорию в фильтре — товары должны обновляться без перезагрузки.
• Отсутствие JS-ошибок в консоли браузера.
• AJAX-запросы успешно обрабатываются (статус 200 в Network).
• Пользователь получает корректный список товаров для выбранной категории и всех ее потомков.

Частые ошибки и как их исправить

• Не передаются параметры AJAX-запроса. Проверьте правильность селектора и данных, которые отправляете из JS.
• Параметр include_children в tax_query отсутствует или false. Без него вложенные категории не учитываются.
• Конфликты с другими плагинами или темой. Используйте режим отладки, отключайте плагины по одному.
• Кэширование AJAX-запросов. Проверьте, не кэшируется ли результат на уровне сервера или плагинов кеширования.

Практические советы по безопасности и производительности

• Всегда используйте sanitize_text_field и другие функции очистки для входящих данных в AJAX-обработчиках.
• Ограничьте количество товаров на страницу, чтобы не перегружать сервер и не замедлять загрузку.
• Используйте транзиенты или кэширование результатов запросов для популярных категорий.
• Для сложных фильтров рассмотрите использование специализированных плагинов, обеспечивающих оптимальную индексацию и кэширование.

Сравнение вариантов решения проблемы AJAX-фильтра по иерархии категорий