Как создать динамический фильтр товаров WooCommerce на AJAX

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

Почему нужен AJAX-фильтр в WooCommerce

AJAX-фильтр позволяет пользователю быстро выбирать нужные параметры — категории, цену, атрибуты — и видеть обновлённый список товаров мгновенно. Это повышает конверсию и улучшает взаимодействие с сайтом.

Стандартные виджеты WooCommerce работают с перезагрузкой страницы, что замедляет работу и не всегда удобно для клиентов.

Реализуя AJAX-фильтр, вы улучшаете UX и увеличиваете скорость работы сайта.

Выбор плагина для AJAX-фильтра

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

• Clearfy Pro – оптимизация и расширение WooCommerce, включая AJAX-фильтры.
• ABC Pagination – удобная AJAX-пагинация и фильтры.
• WPCommunity – если нужен комплексный подход с сообществом и фильтрами.

Но для глубокого понимания и гибкости рассмотрим кодовую реализацию.

Основная логика AJAX-фильтра WooCommerce

Нам нужно:
1. Отобразить фильтры (чекбоксы, слайдеры и т.д.) на странице каталога.
2. Обработать выбор пользователя и отправить AJAX-запрос.
3. Получить и вернуть отфильтрованные товары.
4. Обновить список товаров на странице без перезагрузки.

Для этого создадим AJAX-обработчик в functions.php темы (или в плагине).

Регистрация AJAX-обработчиков

add_action('wp_ajax_wplesson_filter_products', 'wplesson_filter_products_callback');
add_action('wp_ajax_nopriv_wplesson_filter_products', 'wplesson_filter_products_callback');

function wplesson_filter_products_callback() {
    // Проверка nonce для безопасности
    check_ajax_referer('wplesson_filter_nonce', 'nonce');

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

    // Фильтрация по категории
    if (!empty($_POST['category'])) {
        $args['tax_query'][] = [
            'taxonomy' => 'product_cat',
            'field' => 'slug',
            'terms' => array_map('sanitize_text_field', $_POST['category']),
        ];
    }

    // Фильтрация по атрибутам
    if (!empty($_POST['attributes'])) {
        foreach ($_POST['attributes'] as $taxonomy => $terms) {
            $args['tax_query'][] = [
                'taxonomy' => sanitize_text_field($taxonomy),
                'field' => 'slug',
                'terms' => array_map('sanitize_text_field', $terms),
            ];
        }
    }

    // Фильтрация по цене
    if (!empty($_POST['min_price']) && !empty($_POST['max_price'])) {
        $args['meta_query'][] = [
            'key' => '_price',
            'value' => [floatval($_POST['min_price']), floatval($_POST['max_price'])],
            'compare' => 'BETWEEN',
            'type' => 'NUMERIC',
        ];
    }

    // Объединяем таксономии
    if (count($args['tax_query'] ?? []) > 1) {
        $args['tax_query']['relation'] = 'AND';
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        ob_start();
        woocommerce_product_loop_start();
        while ($query->have_posts()) {
            $query->the_post();
            wc_get_template_part('content', 'product');
        }
        woocommerce_product_loop_end();
        wp_send_json_success(ob_get_clean());
    } else {
        wp_send_json_error('Товары не найдены');
    }

    wp_die();
}

Добавление фильтров в шаблон

Для отображения фильтров создадим форму с чекбоксами и слайдерами. Например, фильтр по категориям и цене:

<form id="wplesson-filter">
    <h3>Категории</h3>
    <label><input type="checkbox" name="category[]" value="electronics"> Электроника</label>
    <label><input type="checkbox" name="category[]" value="clothing"> Одежда</label>

    <h3>Цена</h3>
    <input type="number" name="min_price" placeholder="От">
    <input type="number" name="max_price" placeholder="До">

    <button type="submit">Применить</button>
</form>

<div id="wplesson-products"><?php woocommerce_product_loop_start(); woocommerce_product_subcategories(); woocommerce_product_loop_end(); ?></div>

JavaScript для отправки AJAX-запросов

Теперь добавим JS, который будет перехватывать отправку формы, собирать данные и отправлять AJAX-запрос.

jQuery(document).ready(function($) {
    $('#wplesson-filter').on('submit', function(e) {
        e.preventDefault();

        var data = $(this).serializeArray();
        data.push({name: 'action', value: 'wplesson_filter_products'});
        data.push({name: 'nonce', value: wplesson_vars.nonce});

        $.ajax({
            url: wplesson_vars.ajax_url,
            type: 'POST',
            data: data,
            beforeSend: function() {
                $('#wplesson-products').html('<p>Загрузка...</p>');
            },
            success: function(response) {
                if(response.success) {
                    $('#wplesson-products').html(response.data);
                } else {
                    $('#wplesson-products').html('<p>Товары не найдены.</p>');
                }
            },
            error: function() {
                $('#wplesson-products').html('<p>Ошибка запроса.</p>');
            }
        });
    });
});

Подключение скриптов и локализация

Чтобы скрипт мог работать, зарегистрируем и подключим его с локализацией параметров:

function wplesson_enqueue_scripts() {
    wp_enqueue_script('wplesson-filter', get_template_directory_uri() . '/js/wplesson-filter.js', ['jquery'], null, true);
    wp_localize_script('wplesson-filter', 'wplesson_vars', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wplesson_filter_nonce'),
    ]);
}
add_action('wp_enqueue_scripts', 'wplesson_enqueue_scripts');

Советы по улучшению фильтра

Оптимизация запросов

При большом каталоге используйте кэширование результатов AJAX и оптимизируйте запросы WP_Query, чтобы избежать нагрузки на сервер.

Расширение функционала

Добавьте фильтрацию по цвету, размеру и рейтингу, используя дополнительные таксономии и мета-запросы.

Использование готовых плагинов для продвинутых фильтров

Плагины типа Clearfy Pro или ABC Pagination помогут расширить функциональность с минимальными усилиями и поддержкой.

Вывод

Динамический AJAX-фильтр товаров WooCommerce значительно улучшает удобство каталога и повышает конверсию. Вы можете реализовать его самостоятельно, следуя приведённым шагам и примерам кода, либо использовать готовые плагины с расширенными функциями. Главное — адаптировать фильтр под задачи вашего магазина и обеспечить быструю загрузку товаров.