Динамические фильтры — это мощный инструмент улучшения пользовательского опыта на сайте с большим ассортиментом товаров, особенно если вы используете WooCommerce. Они позволяют посетителям быстро находить нужные товары по различным параметрам, что значительно повышает конверсию и удобство работы с каталогом.
Почему динамические фильтры важны для WooCommerce
Стандартные фильтры WooCommerce часто ограничены и не всегда подходят для сложных каталогов с множеством атрибутов и вариаций. Динамические фильтры помогают:
- Отображать только релевантные опции для выбранных параметров;
- Уменьшать количество запросов за счет AJAX-загрузки;
- Повышать скорость и удобство подбора товаров;
- Улучшать SEO за счет корректной работы с фильтрами и адресами.
Рассмотрим, как реализовать динамические фильтры на WooCommerce с помощью кода и популярных плагинов.
Использование плагина WPGPT для создания умных фильтров
Плагин WPGPT может помочь в автоматизации создания фильтров с использованием искусственного интеллекта. Он анализирует данные товаров и предлагает оптимальные параметры для фильтрации, подстраиваясь под поведение пользователей.
Основные преимущества:
- Автоматический подбор фильтров по атрибутам и характеристикам;
- Интеграция с WooCommerce без необходимости сложной настройки;
- Поддержка AJAX для быстрого обновления результатов.
Пример настройки фильтрации с WPGPT
После установки плагина активируйте модуль фильтрации в настройках. Далее добавьте виджет «Фильтр товаров» в нужную область сайта — сайдбар или шапку.
Если нужно кастомизировать фильтры, можно использовать следующий пример PHP-кода для добавления собственного фильтра по метаполю:
add_action('wp_ajax_wpqa_filter_products', 'wpqa_filter_products_callback');
add_action('wp_ajax_nopriv_wpqa_filter_products', 'wpqa_filter_products_callback');
function wpqa_filter_products_callback() {
$meta_key = sanitize_text_field($_POST['meta_key']);
$meta_value = sanitize_text_field($_POST['meta_value']);
$args = [
'post_type' => 'product',
'meta_query' => [
[
'key' => $meta_key,
'value' => $meta_value,
'compare' => '='
]
]
];
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
echo '<div>' . get_the_title() . '</div>';
}
wp_reset_postdata();
} else {
echo '<div>Товары не найдены</div>';
}
wp_die();
}Этот код создаёт AJAX-обработчик, который можно вызвать из JavaScript для динамического обновления списка товаров по выбранному метаполю.
Реализация динамических фильтров с помощью ABC Pagination
Плагин ABC Pagination поддерживает создание многоуровневых навигаций и фильтров с AJAX, что позволяет без перезагрузки страницы менять параметры показа товаров.
Для создания динамического фильтра с ABC Pagination:
- Установите и активируйте плагин.
- В настройках выберите тип фильтрации по атрибутам WooCommerce.
- Настройте внешний вид и поведение фильтров.
Преимущество этого способа — простота и гибкость без необходимости писать много кода.
Создание собственного динамического фильтра с AJAX — детальный пример
Если нужен полностью кастомный подход, можно написать фильтр вручную. Рассмотрим пример, когда пользователь выбирает категорию и цену, а товары обновляются динамически.
1. HTML-разметка фильтра
<form id="wpqa-filter">
<select name="product_cat" id="wpqa-cat-filter">
<option value="">Все категории</option>
<?php
$categories = get_terms('product_cat', ['hide_empty' => true]);
foreach($categories as $cat) {
echo '<option value="' . esc_attr($cat->slug) . '">' . esc_html($cat->name) . '</option>';
}
?>
</select>
<input type="number" name="max_price" id="wpqa-price-filter" placeholder="Максимальная цена" />
<button type="submit">Фильтровать</button>
</form>
<div id="wpqa-products-list"></div>2. JavaScript для AJAX-запроса
jQuery(document).ready(function($) {
$('#wpqa-filter').on('submit', function(e) {
e.preventDefault();
var data = {
action: 'wpqa_filter_products',
product_cat: $('#wpqa-cat-filter').val(),
max_price: $('#wpqa-price-filter').val()
};
$.post(wpqa_ajax_object.ajax_url, data, function(response) {
$('#wpqa-products-list').html(response);
});
});
});3. PHP обработчик AJAX в functions.php
add_action('wp_ajax_wpqa_filter_products', 'wpqa_filter_products_callback');
add_action('wp_ajax_nopriv_wpqa_filter_products', 'wpqa_filter_products_callback');
function wpqa_filter_products_callback() {
$cat = sanitize_text_field($_POST['product_cat']);
$max_price = floatval($_POST['max_price']);
$tax_query = [];
if ($cat) {
$tax_query[] = [
'taxonomy' => 'product_cat',
'field' => 'slug',
'terms' => $cat
];
}
$meta_query = [];
if ($max_price > 0) {
$meta_query[] = [
'key' => '_price',
'value' => $max_price,
'compare' => '<=',
'type' => 'NUMERIC'
];
}
$args = [
'post_type' => 'product',
'posts_per_page' => 20,
'tax_query' => $tax_query,
'meta_query' => $meta_query
];
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
echo '<div>' . get_the_title() . ' - ' . wc_price(get_post_meta(get_the_ID(), '_price', true)) . '</div>';
}
wp_reset_postdata();
} else {
echo '<div>Товары не найдены</div>';
}
wp_die();
}Не забудьте локализовать скрипт для передачи AJAX URL из PHP в JS:
function wpqa_enqueue_scripts() {
wp_enqueue_script('wpqa-filter', get_template_directory_uri() . '/js/wpqa-filter.js', ['jquery'], null, true);
wp_localize_script('wpqa-filter', 'wpqa_ajax_object', [
'ajax_url' => admin_url('admin-ajax.php')
]);
}
add_action('wp_enqueue_scripts', 'wpqa_enqueue_scripts');Дополнительные советы для реализации фильтров
При создании динамических фильтров важно учитывать несколько моментов:
- Кэширование. Используйте серверное кэширование и кеширование AJAX-ответов, чтобы снизить нагрузку.
- SEO. Настраивайте ЧПУ и метатеги для страниц с фильтрами, чтобы избежать дублирования контента.
- Юзабилити. Добавьте индикаторы загрузки и возможность сброса фильтров одним кликом.
- Оптимизация запросов. Старайтесь минимизировать количество запросов к базе данных, объединяя условия.
Выводы и рекомендации
Динамические фильтры в WooCommerce значительно улучшают пользовательский опыт и помогают быстро находить нужные товары. Вы можете использовать готовые решения, такие как WPGPT и ABC Pagination, либо создать собственный фильтр с AJAX, подстраивающийся под ваши уникальные требования.
Для более продвинутых сценариев рекомендуем комбинировать эти методы, а также регулярно анализировать производительность и поведение пользователей, чтобы фильтры оставались эффективными и удобными.