Как создать уникальный AJAX-фильтр для WooCommerce по пользовательским атрибутам

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

Почему нужен кастомный AJAX-фильтр в WooCommerce

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

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

Как подготовить WooCommerce к созданию кастомного AJAX-фильтра

Для начала убедитесь, что у вас есть пользовательские атрибуты, по которым вы хотите фильтровать товары. Обычно они создаются в разделе «Товары» → «Атрибуты» или через метаполя в базе данных. В этом примере мы будем использовать атрибут "Страна производства" (pa_country).

Также понадобится создать шаблон для отображения фильтра и настроить обработчик AJAX-запросов, который будет возвращать отфильтрованные товары.

Необходимые инструменты и плагины

• WooCommerce (естественно)
• Плагин для добавления пользовательских атрибутов, если их нет (например, Clearfy Pro позволяет оптимизировать и добавлять кастомные функции)
• Тема с поддержкой дочерних тем для добавления кода (рекомендуется использовать Root или Reboot)

Создаем HTML форму фильтра с AJAX

Начнем с вывода фильтра на страницу магазина. Поместите код в файл шаблона или в виджет через PHP-код:

<form id="wplessons-ajax-filter" action="" method="POST">
    <label for="country">Страна производства:</label>
    <select name="country" id="country">
        <option value="">Все</option>
        <?php
        $terms = get_terms( array(
            'taxonomy' => 'pa_country',
            'hide_empty' => true,
        ) );
        foreach ( $terms as $term ) {
            echo '<option value="' . esc_attr( $term->slug ) . '">' . esc_html( $term->name ) . '</option>';
        }
        ?>
    </select>
    <button type="submit">Фильтровать</button>
</form>

<div id="wplessons-filter-results"></div>

Этот код выводит выпадающий список с доступными странами производства и кнопку для запуска фильтрации. Результаты будут отображаться в блоке с id wplessons-filter-results.

Добавляем JavaScript для AJAX-запроса

Для отправки формы без перезагрузки страницы используем jQuery. Добавьте этот скрипт в footer.php или подключите отдельным файлом в вашей теме:

jQuery(document).ready(function($){
    $('#wplessons-ajax-filter').on('submit', function(e){
        e.preventDefault();
        var country = $('#country').val();

        $.ajax({
            url: wplessons_ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'wplessons_filter_products',
                country: country,
            },
            beforeSend: function() {
                $('#wplessons-filter-results').html('<p>Загрузка...</p>');
            },
            success: function(response) {
                $('#wplessons-filter-results').html(response);
            },
            error: function() {
                $('#wplessons-filter-results').html('<p>Ошибка загрузки данных</p>');
            }
        });
    });
});

Обратите внимание, что в переменной wplessons_ajax_object.ajax_url должен быть URL для AJAX-запросов. Это нужно добавить в functions.php:

function wplessons_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('wplessons-ajax-filter', get_template_directory_uri() . '/js/ajax-filter.js', array('jquery'), null, true);
    wp_localize_script('wplessons-ajax-filter', 'wplessons_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
    ));
}
add_action('wp_enqueue_scripts', 'wplessons_enqueue_scripts');

Обрабатываем AJAX-запрос на сервере

Теперь добавим PHP-функцию, которая будет обрабатывать AJAX-запрос и возвращать отфильтрованные товары. В functions.php добавьте:

function wplessons_filter_products() {
    $country = isset($_POST['country']) ? sanitize_text_field($_POST['country']) : '';

    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 12,
        'tax_query' => array(),
    );

    if ( $country ) {
        $args['tax_query'][] = array(
            'taxonomy' => 'pa_country',
            'field'    => 'slug',
            'terms'    => $country,
        );
    }

    $query = new WP_Query( $args );

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

    wp_die();
}
add_action('wp_ajax_wplessons_filter_products', 'wplessons_filter_products');
add_action('wp_ajax_nopriv_wplessons_filter_products', 'wplessons_filter_products');

Эта функция получает выбранный атрибут, формирует WP_Query с таксономией pa_country и выводит стандартный шаблон товара WooCommerce.

Улучшения и расширения фильтра

Вы можете добавить дополнительные поля фильтрации, например, по цене, цвету, размеру или произвольным метаполям. Для этого расширяйте $args['tax_query'] или добавляйте meta_query в запрос WP_Query.

Также полезно добавить индикаторы загрузки, сброс фильтров и пагинацию через AJAX.

Пример добавления фильтра по цене

Добавьте в форму два поля для минимальной и максимальной цены и расширьте обработчик так:

if ( isset($_POST['min_price'], $_POST['max_price']) ) {
    $min_price = floatval($_POST['min_price']);
    $max_price = floatval($_POST['max_price']);

    $args['meta_query'][] = array(
        'key' => '_price',
        'value' => array($min_price, $max_price),
        'compare' => 'BETWEEN',
        'type' => 'NUMERIC',
    );
}

Заключение

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

Если хотите автоматизировать другие задачи в WooCommerce и WordPress, посмотрите решения на WPGPT или оптимизируйте работу сайта с помощью Clearfy Pro.