AJAX фильтры — это удобный инструмент для улучшения пользовательского опыта в интернет-магазине на WordPress. Они позволяют покупателям быстро находить нужные товары, не перезагружая страницу. В этой статье мы подробно разберём, как реализовать AJAX фильтрацию товаров своими руками и с помощью популярных плагинов, а также приведём примеры кода для интеграции с WooCommerce.
Почему AJAX фильтры важны для интернет-магазина WordPress
Стандартная фильтрация товаров в WooCommerce и других плагинах часто требует полной перезагрузки страницы, что замедляет работу сайта и ухудшает пользовательский опыт. AJAX позволяет загружать отфильтрованные товары динамически, без перезагрузки, что:
- Ускоряет взаимодействие пользователя с магазином;
- Снижает нагрузку на сервер;
- Повышает конверсию за счёт удобного поиска нужных товаров;
- Обеспечивает современный интерфейс с плавными переходами.
Реализовать AJAX фильтры можно двумя способами — с помощью плагинов или собственных решений на PHP и JavaScript.
Лучшие плагины для AJAX фильтров в WordPress
Рассмотрим несколько популярных плагинов, которые помогут быстро добавить AJAX фильтры в магазин на WooCommerce:
1. WPC Smart Quick View
Этот плагин от WPClever поддерживает AJAX фильтры и быстрый просмотр товаров. Он лёгок в настройке и интеграции с WooCommerce.
2. WooCommerce Product Filter by WooBeWoo
Мощное решение с поддержкой AJAX, позволяющее создавать фильтры по атрибутам, ценам, категориям и пользовательским полям. Есть бесплатная и платная версия.
3. FacetWP
Премиум плагин с отличной производительностью и гибкой настройкой фильтров. Работает с кастомными типами записей и метаполями, идеально подходит для больших магазинов.
Пример реализации AJAX фильтров своими руками в WooCommerce
Если вы хотите гибко настроить фильтры под свои задачи, можно добавить их самостоятельно. Вот пошаговый пример.
Шаг 1. Добавляем фильтр по цене и атрибуту
В файле functions.php вашей темы (лучше дочерней) добавьте код для регистрации AJAX обработчика:
add_action('wp_ajax_wpcorp_filter_products', 'wpcorp_filter_products_callback');
add_action('wp_ajax_nopriv_wpcorp_filter_products', 'wpcorp_filter_products_callback');
function wpcorp_filter_products_callback() {
// Получаем параметры фильтра из AJAX-запроса
$price_min = isset($_POST['price_min']) ? floatval($_POST['price_min']) : 0;
$price_max = isset($_POST['price_max']) ? floatval($_POST['price_max']) : 999999;
$color = isset($_POST['color']) ? sanitize_text_field($_POST['color']) : '';
// Формируем WP_Query с фильтрами
$args = [
'post_type' => 'product',
'posts_per_page' => 12,
'meta_query' => [
[
'key' => '_price',
'value' => [ $price_min, $price_max ],
'compare' => 'BETWEEN',
'type' => 'NUMERIC',
],
],
'tax_query' => [],
];
if ($color) {
$args['tax_query'][] = [
'taxonomy' => 'pa_color',
'field' => 'slug',
'terms' => $color,
];
}
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
wc_get_template_part('content', 'product');
}
} else {
echo '<p>Товары не найдены</p>';
}
wp_die();
}Шаг 2. Добавляем JavaScript для отправки AJAX-запроса
Подключите скрипт в footer.php или через wp_enqueue_scripts:
jQuery(document).ready(function($) {
$('#wpcorp-filter-form').on('submit', function(e) {
e.preventDefault();
var price_min = $('#price_min').val();
var price_max = $('#price_max').val();
var color = $('#color').val();
$.ajax({
url: wpcorp_ajax.url,
type: 'POST',
data: {
action: 'wpcorp_filter_products',
price_min: price_min,
price_max: price_max,
color: color
},
beforeSend: function() {
$('#wpcorp-products').html('<p>Загрузка...</p>');
},
success: function(data) {
$('#wpcorp-products').html(data);
}
});
});
});Шаг 3. Добавляем HTML форму фильтра и контейнер вывода
Пример формы для фильтрации:
<form id="wpcorp-filter-form">
<label>Цена от: <input type="number" id="price_min" name="price_min" value="0"></label>
<label>Цена до: <input type="number" id="price_max" name="price_max" value="10000"></label>
<label>Цвет: <select id="color" name="color">
<option value="">Выберите цвет</option>
<option value="red">Красный</option>
<option value="blue">Синий</option>
<option value="green">Зелёный</option>
</select></label>
<button type="submit">Фильтровать</button>
</form>
<div id="wpcorp-products">
<!-- Здесь будут отображаться товары -->
</div>Как интегрировать AJAX фильтры с плагином WPGPT для улучшенного поиска
Если на вашем сайте установлен плагин WPGPT, вы можете дополнительно улучшить поиск и фильтрацию с помощью AI-подсказок. Плагин позволяет создавать интеллектуальные фильтры и рекомендации, которые помогут покупателям быстрее находить нужный товар.
Для интеграции достаточно вызвать AJAX фильтрацию, а в ответ добавить подсказки от WPGPT, что повысит конверсию и удержание пользователей.
Советы по оптимизации AJAX фильтров в WooCommerce
Для стабильной работы и скорости фильтров учитывайте следующие моменты:
- Используйте кэширование запросов и ответов, чтобы снизить нагрузку на базу данных;
- Ограничивайте количество отображаемых товаров на странице с помощью pagination;
- Загружайте необходимые скрипты только на страницах магазина, чтобы не замедлять весь сайт;
- Минимизируйте и объединяйте JavaScript и CSS для ускорения загрузки;
- Тестируйте фильтры на больших наборах данных для проверки производительности.
Использование приведённого подхода позволит вам создать быстрые и удобные AJAX фильтры в вашем магазине на WordPress, значительно улучшив пользовательский опыт и увеличив продажи.