Как создать AJAX фильтр товаров в WordPress: подробное руководство

Автор: Дарья Данилова | Опубликовано: 16.01.2026

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

Что такое AJAX фильтр и зачем он нужен в WordPress

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

Преимущества AJAX фильтра:

Быстрая и плавная работа сайта;
Улучшенный пользовательский опыт;
Снижение нагрузки на сервер за счет частичной подгрузки данных;
Гибкость настроек фильтрации;
Возможность реализации сложных условий фильтрации.

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

Основные шаги создания AJAX фильтра товаров в WordPress

Реализация AJAX фильтра состоит из нескольких этапов:

Создание HTML формы фильтра с нужными параметрами;
Подключение JavaScript для отправки AJAX-запросов при изменении фильтра;
Обработка AJAX-запросов на стороне PHP — получение фильтров и формирование запроса WP_Query;
Возврат отфильтрованных товаров в формате HTML и обновление части страницы;
Оптимизация и кеширование запросов для повышения производительности.

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

Пример простого фильтра по категории и цене:

<form id="wpkit-filter-form">
  <select name="category">
    <option value="">Все категории</option>
    <option value="electronics">Электроника</option>
    <option value="books">Книги</option>
  </select>

  <input type="number" name="min_price" placeholder="Мин. цена" />
  <input type="number" name="max_price" placeholder="Макс. цена" />

  <button type="submit">Фильтровать</button>
</form>

<div id="wpkit-products-list"></div>

Этот блок мы добавим в нужное место шаблона, например, на страницу каталога.

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

Подключим скрипт, который будет перехватывать отправку формы и делать AJAX-запрос:

jQuery(document).ready(function($) {
  $('#wpkit-filter-form').on('submit', function(e) {
    e.preventDefault();
    var data = $(this).serialize();

    $.ajax({
      url: wpkit_ajax_object.ajax_url,
      type: 'POST',
      data: {
        action: 'wpkit_filter_products',
        filter_data: data
      },
      success: function(response) {
        $('#wpkit-products-list').html(response);
      },
      error: function() {
        alert('Ошибка при загрузке товаров');
      }
    });
  });
});

Обратите внимание, что для передачи AJAX-URL и nonce рекомендуется использовать функцию wp_localize_script в PHP.

Обработка AJAX-запроса в PHP

В файле functions.php вашей темы или плагина добавим обработчик:

add_action('wp_ajax_wpkit_filter_products', 'wpkit_ajax_filter_products');
add_action('wp_ajax_nopriv_wpkit_filter_products', 'wpkit_ajax_filter_products');

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

  $args = [
    'post_type' => 'product', // для WooCommerce
    'posts_per_page' => 10,
    'meta_query' => [],
    'tax_query' => []
  ];

  if (!empty($filter['category'])) {
    $args['tax_query'][] = [
      'taxonomy' => 'product_cat',
      'field' => 'slug',
      'terms' => sanitize_text_field($filter['category']),
    ];
  }

  if (!empty($filter['min_price'])) {
    $args['meta_query'][] = [
      'key' => '_price',
      'value' => floatval($filter['min_price']),
      'compare' => '>=',
      'type' => 'NUMERIC'
    ];
  }

  if (!empty($filter['max_price'])) {
    $args['meta_query'][] = [
      'key' => '_price',
      'value' => floatval($filter['max_price']),
      'compare' => '<=',
      'type' => 'NUMERIC'
    ];
  }

  $query = new WP_Query($args);

  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      wc_get_template_part('content', 'product'); // шаблон WooCommerce
    }
  } else {
    echo '<p>Товары не найдены.</p>';
  }
  wp_reset_postdata();
  wp_die();
}

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

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

Если вы хотите использовать готовое решение или расширить функционал, обратите внимание на следующие плагины:

Ajax Filter for WooCommerce — плагин с гибкой настройкой фильтров по атрибутам, цене, категориям;
Clearfy Pro — набор инструментов оптимизации, включая улучшенный AJAX функционал;
WPRemark — плагин для оценки и фильтрации отзывов с AJAX.

Использование плагинов позволяет сэкономить время и получить дополнительные опции фильтрации без глубокой доработки кода.

Оптимизация и рекомендации по производительности AJAX фильтра

При работе с AJAX фильтрами важно учитывать нагрузку на сервер и скорость отклика:

Используйте кеширование результатов — например, с помощью Transients API или объектов кеша;
Минимизируйте количество запросов — обрабатывайте только измененные параметры;
Ограничивайте количество выводимых товаров на страницу;
Используйте индексы в базе данных для мета-запросов и таксономий;
Проверяйте и оптимизируйте фронтенд код, избегайте избыточных перерендерингов.

Правильная архитектура AJAX фильтра позволит сделать сайт быстрым и удобным для посетителей.

Пример использования Transients API для кеширования

function wpkit_ajax_filter_products() {
  parse_str($_POST['filter_data'], $filter);
  $cache_key = 'wpkit_filter_' . md5(serialize($filter));

  if ( false === ($output = get_transient($cache_key)) ) {
    // Здесь формируем WP_Query и генерируем $output
    ob_start();
    // ...код запроса и вывода товаров...
    $output = ob_get_clean();
    set_transient($cache_key, $output, 3600); // кеш на час
  }

  echo $output;
  wp_die();
}

Заключение

Создание AJAX фильтра товаров в WordPress — это отличный способ улучшить взаимодействие пользователей с вашим сайтом. С помощью простого HTML, JavaScript и PHP вы можете реализовать динамическую фильтрацию, а при необходимости — использовать мощные плагины из магазина WPSHOP для расширенных функций и оптимизации. Обязательно следите за производительностью и UX, чтобы ваш сайт оставался быстрым и удобным.