WooCommerce не отображает товары при фильтрации AJAX: как исправить проблему

Диагностика проблемы: почему товары не обновляются при AJAX-фильтрации в WooCommerce

Проблема, когда фильтр товаров на основе AJAX в WooCommerce перестает обновлять список товаров, встречается нередко. Чаще всего это проявляется в следующих ситуациях:

• Фильтр применён, но товары не меняются, страница остается с тем же списком;
• Ошибки в консоли браузера, связанные с JavaScript или AJAX;
• Запросы AJAX возвращают пустой ответ или HTML без товаров;
• Кэширование на стороне сервера или плагинов мешает обновлению;
• Конфликт с темой или плагинами, которые переопределяют WooCommerce шаблоны.

Для диагностики используйте инструменты разработчика браузера (F12) и вкладки Console и Network. Проверьте, отправляется ли AJAX-запрос и какой ответ приходит. Если ответ пустой или с ошибкой, проблема на серверной части. Если запрос не отправляется — проблема в JavaScript.

Пошаговое решение: исправляем AJAX-фильтрацию

1. Проверка JavaScript и правильности инициализации AJAX

Убедитесь, что у вас корректно подключены скрипты WooCommerce и jQuery, а фильтр запускает AJAX-запросы. Для примера, если вы используете кастомный фильтр, код должен содержать примерно такую структуру:

jQuery(document).on('change', '.your-filter-class', function() {
    var filterValue = jQuery(this).val();
    jQuery.ajax({
        url: wc_params.ajax_url,
        type: 'POST',
        data: {
            action: 'custom_filter_products',
            filter: filterValue
        },
        success: function(response) {
            jQuery('.products').html(response);
        }
    });
});

Если вы используете плагин фильтров, проверьте, что он совместим с вашей версией WooCommerce и темой.

2. Реализация серверной части AJAX для фильтрации

На стороне сервера нужно обработать AJAX-запрос и вернуть обновленную разметку товаров. Пример обработчика в functions.php:

add_action('wp_ajax_custom_filter_products', 'custom_filter_products_callback');
add_action('wp_ajax_nopriv_custom_filter_products', 'custom_filter_products_callback');

function custom_filter_products_callback() {
    $filter = sanitize_text_field($_POST['filter'] ?? '');

    $args = [
        'post_type' => 'product',
        'posts_per_page' => 12,
        'tax_query' => []
    ];

    if ($filter) {
        $args['tax_query'][] = [
            'taxonomy' => 'product_cat',
            'field' => 'slug',
            'terms' => $filter
        ];
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        woocommerce_product_loop_start();
        while ($query->have_posts()) {
            $query->the_post();
            wc_get_template_part('content', 'product');
        }
        woocommerce_product_loop_end();
    } else {
        echo '<p>Товары не найдены по выбранным критериям.</p>';
    }

    wp_die();
}

3. Отключение кэширования для AJAX-запросов фильтрации

Если у вас включено кэширование (например, плагин кеша, серверный кеш, CDN), оно может возвращать устаревшую страницу. Для AJAX-запросов добавьте заголовки, предотвращающие кеш:

function no_cache_for_ajax() {
    if (defined('DOING_AJAX') && DOING_AJAX) {
        nocache_headers();
    }
}
add_action('send_headers', 'no_cache_for_ajax');

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

• Откройте страницу с товарами и примените фильтр;
• Вкладка Network в DevTools должна отобразить AJAX-запрос с ответом, содержащим HTML товаров;
• Список товаров на странице должен обновиться без перезагрузки;
• В консоли браузера отсутствуют ошибки JavaScript;
• Если фильтр возвращает «Товары не найдены» — измените фильтр, чтобы убедиться, что запрос работает корректно.

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

• Ошибка 400 или 500 в ответе AJAX: Проверьте серверные логи, убедитесь, что нет ошибок синтаксиса или нехватки памяти.
• Пустой ответ: Вероятно, WP_Query не находит товаров. Проверьте параметры запроса и существование терминов таксономии.
• JavaScript ошибка «wc_params не определён»: Убедитесь, что подключен woocommerce.js и локализован скрипт wc_params.
• Кэширование мешает обновлению: Отключите кеширование для AJAX-запросов, см. выше.
• Конфликты с темой: Временно переключитесь на стандартную тему Storefront, чтобы проверить работу фильтра.

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

• Используйте wp_send_json_success() и wp_send_json_error() для формата ответа AJAX, если планируете расширять логику.
• Всегда фильтруйте и экранируйте входящие данные (sanitize_text_field(), intval() и др.) перед использованием в запросах.
• Кешируйте результаты сложных запросов с помощью Transients API, если данные не меняются часто.
• Минимизируйте количество возвращаемых товаров или применяйте пагинацию при большом каталоге.
• Проверяйте совместимость плагинов фильтрации товаров с текущей версией WooCommerce и WordPress.

Сравнение способов реализации AJAX-фильтрации товаров