Динамический фильтр по тегам товаров WooCommerce: пошаговое создание

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

Почему нужен динамический фильтр по тегам WooCommerce

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

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

Создание кастомного виджета фильтрации по тегам WooCommerce

Первым шагом создадим кастомный виджет, который выведет все теги товаров с чекбоксами. Для этого добавим следующий код в файл functions.php вашей темы или в отдельный плагин:

function wpdesk_register_tags_filter_widget() {
    register_widget('WPDesk_Tags_Filter_Widget');
}
add_action('widgets_init', 'wpdesk_register_tags_filter_widget');

class WPDesk_Tags_Filter_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpdesk_tags_filter',
            'Фильтр по тегам товаров WooCommerce',
            array('description' => 'Динамический фильтр по тегам товаров')
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        echo '<div id="wpdesk-tags-filter">';
        $tags = get_terms(array(
            'taxonomy' => 'product_tag',
            'hide_empty' => true,
        ));
        if (!empty($tags) && !is_wp_error($tags)) {
            echo '<form id="wpdesk-tags-filter-form">';
            foreach ($tags as $tag) {
                echo '<label><input type="checkbox" name="product_tag[]" value="' . esc_attr($tag->slug) . '"> ' . esc_html($tag->name) . '</label><br>';
            }
            echo '</form>';
        }
        echo '<div id="wpdesk-filter-results"></div>';
        echo '</div>';
        echo $args['after_widget'];
    }
}

Этот виджет выведет список тегов с чекбоксами. Следующий шаг — реализовать динамическую загрузку товаров по выбранным тегам.

Добавление AJAX обработки и вывода товаров

Теперь нам нужно написать обработчик AJAX-запроса, который будет получать выбранные теги и возвращать соответствующие товары. Добавим в functions.php следующий код:

function wpdesk_filter_products_by_tags() {
    $tags = isset($_POST['tags']) ? array_map('sanitize_text_field', (array) $_POST['tags']) : array();

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

    if (!empty($tags)) {
        $args['tax_query'][] = array(
            'taxonomy' => 'product_tag',
            'field' => 'slug',
            'terms' => $tags,
            'operator' => 'IN',
        );
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        ob_start();
        echo '<ul class="wpdesk-product-list">';
        while ($query->have_posts()) {
            $query->the_post();
            global $product;
            echo '<li>';
            echo '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';
            if ($product) {
                echo ' - ' . $product->get_price_html();
            }
            echo '</li>';
        }
        echo '</ul>';
        wp_reset_postdata();
        $content = ob_get_clean();
        wp_send_json_success($content);
    } else {
        wp_send_json_success('<p>Товары не найдены</p>');
    }
    wp_die();
}
add_action('wp_ajax_wpdesk_filter_products', 'wpdesk_filter_products_by_tags');
add_action('wp_ajax_nopriv_wpdesk_filter_products', 'wpdesk_filter_products_by_tags');

Этот код получает массив тегов из AJAX-запроса, формирует WP_Query с tax_query по тегам и возвращает HTML список товаров. Если товаров нет — сообщает об этом.

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

Теперь добавим JavaScript, который будет отслеживать изменения чекбоксов, отправлять AJAX-запрос и обновлять список товаров без перезагрузки. Код можно добавить в файл js вашего шаблона или внедрить через wp_enqueue_script:

jQuery(document).ready(function($) {
    $('#wpdesk-tags-filter-form input[type="checkbox"]').on('change', function() {
        var selectedTags = [];
        $('#wpdesk-tags-filter-form input[type="checkbox"]:checked').each(function() {
            selectedTags.push($(this).val());
        });

        $.ajax({
            url: wpdesk_ajax_object.ajax_url,
            method: 'POST',
            data: {
                action: 'wpdesk_filter_products',
                tags: selectedTags
            },
            beforeSend: function() {
                $('#wpdesk-filter-results').html('<p>Загрузка...</p>');
            },
            success: function(response) {
                if (response.success) {
                    $('#wpdesk-filter-results').html(response.data);
                } else {
                    $('#wpdesk-filter-results').html('<p>Ошибка загрузки товаров</p>');
                }
            },
            error: function() {
                $('#wpdesk-filter-results').html('<p>Ошибка AJAX запроса</p>');
            }
        });
    });
});

Не забудьте добавить локализацию скрипта для передачи AJAX URL в глобальный объект wpdesk_ajax_object:

function wpdesk_enqueue_scripts() {
    wp_enqueue_script('wpdesk-filter', get_stylesheet_directory_uri() . '/js/wpdesk-filter.js', array('jquery'), '1.0', true);
    wp_localize_script('wpdesk-filter', 'wpdesk_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
    ));
}
add_action('wp_enqueue_scripts', 'wpdesk_enqueue_scripts');

Дополнительные улучшения фильтра

Этот базовый пример можно расширять и улучшать:

• Поддержка пагинации — можно добавить постраничный вывод и AJAX подгрузку следующей страницы результатов.
• Стилизация и UX — добавить красивый дизайн чекбоксов, анимацию загрузки и уведомления.
• Кэширование запросов — чтобы снизить нагрузку на сервер при частых запросах.
• Поддержка нескольких таксономий — например, фильтрация по категориям и атрибутам вместе с тегами.
• Интеграция с плагинами — например, с WPGPT для создания умных подсказок по тегам.

Выводы и рекомендации

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

Если же нужна более сложная фильтрация с множеством условий и поддержкой AJAX из коробки, рассмотрите плагины Clearfy Pro или WPRemark, которые могут расширить возможности магазина и улучшить производительность.

Для удобства скачайте полный пример кода в архиве на WPSHOP.ru и адаптируйте под свои задачи.