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

В современных интернет-магазинах и каталогах товаров удобный фильтр — это неотъемлемая часть пользовательского опыта. В этой статье мы подробно разберём, как создать динамический фильтр товаров в WordPress, который будет подгружать результаты без перезагрузки страницы с помощью AJAX и использовать пользовательские поля (Custom Fields) или таксономии.

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

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

Для реализации динамического фильтра понадобится:

• Использовать кастомные типы записей и метаданные (или таксономии).
• Реализовать AJAX-запросы для подгрузки товаров.
• Обеспечить удобный интерфейс фильтрации.

Создание пользовательских полей для товаров

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

Пример создания пользовательского поля «Цена» для товара:

function wpstart_add_custom_meta_box() {
    add_meta_box('wpstart_price_meta', 'Цена товара', 'wpstart_price_meta_box_callback', 'product', 'side');
}
add_action('add_meta_boxes', 'wpstart_add_custom_meta_box');

function wpstart_price_meta_box_callback($post) {
    $value = get_post_meta($post->ID, '_wpstart_price', true);
    echo '<label for="wpstart_price_field">Цена:</label> ';
    echo '<input type="number" id="wpstart_price_field" name="wpstart_price_field" value="' . esc_attr($value) . '" step="0.01" min="0" />';
}

function wpstart_save_price_meta_box_data($post_id) {
    if (array_key_exists('wpstart_price_field', $_POST)) {
        update_post_meta($post_id, '_wpstart_price', sanitize_text_field($_POST['wpstart_price_field']));
    }
}
add_action('save_post', 'wpstart_save_price_meta_box_data');

Реализация AJAX для динамической фильтрации

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

Добавим JavaScript для отправки запроса при изменении фильтра:

jQuery(document).ready(function($) {
    $('#wpstart-filter-form input, #wpstart-filter-form select').on('change', function() {
        var data = $('#wpstart-filter-form').serialize();
        $.ajax({
            url: wpstart_ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'wpstart_filter_products',
                filter_data: data
            },
            success: function(response) {
                $('#wpstart-products-container').html(response);
            }
        });
    });
});

В functions.php опишем обработчик AJAX:

function wpstart_filter_products_ajax() {
    parse_str($_POST['filter_data'], $filter);

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

    // Фильтр по цене (пример)
    if (!empty($filter['price_min']) || !empty($filter['price_max'])) {
        $price_query = array('key' => '_wpstart_price', 'type' => 'NUMERIC');
        if (!empty($filter['price_min'])) {
            $price_query['value'][] = floatval($filter['price_min']);
            $price_query['compare'] = '>=';
        }
        if (!empty($filter['price_max'])) {
            $price_query['value'][] = floatval($filter['price_max']);
            $price_query['compare'] = '<=';
        }
        if (count($price_query['value']) == 2) {
            $price_query['compare'] = 'BETWEEN';
        }
        $args['meta_query'][] = $price_query;
    }

    // Добавьте другие фильтры по таксономиям или метаданным здесь

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<div class="wpstart-product-item">';
            echo '<h3>' . get_the_title() . '</h3>';
            echo '<p>Цена: ' . get_post_meta(get_the_ID(), '_wpstart_price', true) . '</p>';
            echo '</div>';
        }
        wp_reset_postdata();
    } else {
        echo '<p>Товары не найдены по заданным параметрам.</p>';
    }
    wp_die();
}
add_action('wp_ajax_wpstart_filter_products', 'wpstart_filter_products_ajax');
add_action('wp_ajax_nopriv_wpstart_filter_products', 'wpstart_filter_products_ajax');

Пример HTML-разметки фильтра

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

<form id="wpstart-filter-form">
    <label for="price_min">Минимальная цена:</label>
    <input type="number" name="price_min" id="price_min" step="0.01" min="0" />

    <label for="price_max">Максимальная цена:</label>
    <input type="number" name="price_max" id="price_max" step="0.01" min="0" />

    <!-- Добавьте другие поля фильтра -->
</form>

<div id="wpstart-products-container">
    <!-- Здесь будут отображаться товары -->
</div>

Рекомендации по плагинам для расширения функционала

Для упрощения работы и расширения функционала можно использовать плагины из каталога WPShop. Например:

• Clearfy Pro — для оптимизации и управления метаданными.
• Expert Review — для добавления отзывов с фильтрацией по оценкам.
• ABC Pagination — для удобной постраничной навигации.

Использование готовых решений поможет сэкономить время и повысить стабильность проекта.

Особенности и советы при реализации

При реализации динамического фильтра уделяйте внимание производительности. Сложные meta_query и tax_query могут замедлить запросы, особенно при большом количестве товаров. Оптимизируйте базу, удаляйте неиспользуемые мета данные (WPRemark поможет с этим).

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

В целом, динамический фильтр — мощный инструмент, который повышает удобство сайта и способствует росту продаж или вовлеченности посетителей.