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

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

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

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

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

Основные шаги создания динамического фильтра товаров WooCommerce

Для реализации динамического фильтра нам нужно выполнить следующие задачи:

• Создать интерфейс фильтров на странице каталога.
• Написать JavaScript для отправки AJAX-запроса при изменении фильтров.
• Обработать AJAX-запрос на сервере, сформировать правильный WP_Query с учетом фильтров.
• Вернуть HTML с обновленным списком товаров и вывести его на страницу.

Создаем интерфейс фильтров

Для примера сделаем фильтр по категории, атрибуту "Цвет" и ценовому диапазону. Разместим форму над списком товаров:

<form id="wparticles_filter" action="" method="POST">
  <select name="product_cat">
    <option value="">Все категории</option>
    <?php
    $categories = get_terms('product_cat', array('hide_empty' => true));
    foreach($categories as $cat) {
      echo '<option value="' . esc_attr($cat->slug) . '">' . esc_html($cat->name) . '</option>';
    }
    ?>
  </select>

  <select name="pa_color">
    <option value="">Все цвета</option>
    <?php
    $colors = get_terms('pa_color', array('hide_empty' => true));
    foreach($colors as $color) {
      echo '<option value="' . esc_attr($color->slug) . '">' . esc_html($color->name) . '</option>';
    }
    ?>
  </select>

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

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

В этом коде мы выводим выпадающие списки для категорий и цветов, а также два поля для минимальной и максимальной цены.

JavaScript для AJAX-запроса

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

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

    $.ajax({
      url: wparticles_ajax_object.ajax_url,
      method: 'POST',
      data: {
        action: 'wparticles_filter_products',
        filter_data: data
      },
      beforeSend: function() {
        $('#products_container').html('<p>Загрузка...</p>');
      },
      success: function(response) {
        $('#products_container').html(response);
      },
      error: function() {
        $('#products_container').html('<p>Ошибка загрузки товаров.</p>');
      }
    });
  });
});

Обратите внимание, что здесь предполагается, что в глобальной JS переменной wparticles_ajax_object.ajax_url содержится URL для AJAX запросов, его нужно добавить через wp_localize_script в functions.php.

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

Добавим обработчик AJAX-запроса в functions.php темы или плагина:

add_action('wp_ajax_wparticles_filter_products', 'wparticles_filter_products');
add_action('wp_ajax_nopriv_wparticles_filter_products', 'wparticles_filter_products');

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

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

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

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

  if (!empty($filter['min_price']) || !empty($filter['max_price'])) {
    $price_query = array('key' => '_price');
    if (!empty($filter['min_price'])) {
      $price_query['value'][] = floatval($filter['min_price']);
      $price_query['compare'] = '>=';
    }
    if (!empty($filter['max_price'])) {
      $price_query['value'][] = floatval($filter['max_price']);
      $price_query['compare'] = isset($price_query['compare']) ? 'BETWEEN' : '<=';
    }
    if (count($price_query['value']) > 1) {
      $price_query['compare'] = 'BETWEEN';
    }
    $args['meta_query'][] = $price_query;
  }

  if (count($args['tax_query']) > 1) {
    $args['tax_query']['relation'] = 'AND';
  }

  $query = new WP_Query($args);

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

Код формирует WP_Query с учетом выбранных фильтров и выводит товары стандартным шаблоном WooCommerce.

Рекомендации по улучшению и расширению фильтра

Чтобы сделать фильтр более мощным и удобным, можно добавить:

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

Если вы используете тему Reboot или Root от WPSHOP, можно интегрировать фильтр с их кастомными шаблонами и стилями, что сделает внешний вид еще лучше и удобнее.

Полезные плагины для расширения возможностей фильтров WooCommerce

Если хочется быстро добавить мощные фильтры без программирования, обратите внимание на плагины:

• Clearfy Pro — оптимизация и расширение WooCommerce, в том числе улучшенные фильтры.
• ABC Pagination — умная пагинация с AJAX, отлично подходит для фильтров.
• WPRemark — оценка и фильтрация товаров по отзывам и рейтингам.

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