M

Pure Filter

Лёгкий, быстрый и стильный AJAX-фильтр товаров для WooCommerce, выполненный в монохромном fashion-стиле

Pure query
Pure filters
Pure filters
Pure filters
Pure filters

Pure Filter for WooCommerce — это лёгкий, быстрый и стильный AJAX-фильтр товаров для WooCommerce, выполненный в монохромном fashion-стиле. Плагин позволяет создавать неограниченное количество пресетов фильтрации с гибкими настройками и выводить их через шорткод [pure_filter].

Ключевая особенность — динамический faceted search: при выборе фильтров автоматически обновляются не только товары, но и сами блоки фильтрации (скрываются пустые категории, атрибуты и т.д.), обеспечивая умную навигацию по каталогу.

Версия: 1.1.8
Требования: WordPress 5.6+, PHP 7.4+, WooCommerce 5.0+

Структура файлов плагина Pure Filter for WooCommerce

pure-filter/
│
├── pure-filter.php                          # Главный файл плагина (бутстрап)
│   │  - Объявляет константы (PURE_FILTER_VERSION, PURE_FILTER_PATH и т.д.)
│   │  - Проверяет наличие WooCommerce
│   │  - Подключает классы Admin и Public
│   │  - Регистрирует хук активации
│   │  - Выводит уведомление, если WooCommerce не активен
│
├── uninstall.php                            # Скрипт деинсталляции
│   │  - Очищает опции плагина при удалении
│
├── assets/
│   ├── css/
│   │   └── pure-filter.css                  # Фронтенд-стили (959 строк)
│   │      - Монохромный fashion-дизайн
│   │      - Кастомные чекбоксы, селекты, swatches
│   │      - Dual range slider
│   │      - Макеты Horizontal / Vertical (desktop + mobile)
│   │      - Стили пагинации и Load More
│   │      - Анимации и AJAX loading bar
│   │
│   └── js/
│       └── pure-filter.js                   # Фронтенд-скрипт (jQuery)
│          - Сбор данных формы и отправка AJAX
│          - Управление dropdown'ами (open/close)
│          - Dual range slider (синхронизация ползунков и полей)
│          - Load More (append товаров)
│          - Faceted search (обновление блоков фильтра)
│          - Applied filters ("активные фильтры" теги)
│          - Rate limit на стороне клиента
│
└── includes/
    ├── class-pure-filter-admin.php          # Админ-панель (600 строк)
    │   - Меню: Pure Plugins → Filter
    │   - Таблица списка пресетов (с шорткодами)
    │   - Форма создания/редактирования пресета:
    │       • Общие настройки (имя, layout, пагинация, target_query_id)
    │       • Стандартные фильтры (категории, цена, наличие, сортировка)
    │       • Атрибуты товаров (4 типа отображения, порядок, сортировка терминов)
    │   - Обработка сохранения и удаления пресетов
    │   - Стили админ-панели (inline CSS)
    │
    └── class-pure-filter-public.php         # Публичная часть (2197 строк)
        - Регистрация шорткода [pure_filter]
        - Подключение CSS/JS на фронтенде
        - Построение WP_Query из GET-параметров фильтра
        - Модификация основного WooCommerce запроса
        - AJAX-обработчик (handle_ajax_filtering):
            • Rate limiting
            • Кэширование (2 мин)
            • Сборка запроса с учётом всех фильтров
            • Рендеринг товаров, пагинации, обновлённых фильтров
        - Faceted Search (get_filtered_product_ids):
            • Определение ID товаров для каждого фильтра
            • Кэширование через транзиенты
        - Отрисовка блоков фильтрации:
            • render_categories_section() — 3 типа (list, checkbox, dropdown)
            • render_price_section() — dual range slider
            • render_stock_section() — наличие / скидка
            • render_sorting_section() — 6 вариантов
            • render_attribute_section() — 4 типа (checkbox, color, text, dropdown)
        - Работа с вариативными товарами:
            • get_product_ids_by_attribute() — поиск по postmeta вариаций
            • get_attribute_terms_for_products() — термины с учётом stock_status
        - Интеграция с Pure Query:
            • override_pure_query_pagination_type()
            • is_pure_query_pagination_managed_by_filter()
        - Работа со шорткодами WooCommerce:
            • override_shortcode_products_query()
            • filter_shortcode_atts()
        - Определение активного пресета:
            • get_current_preset_id() — с fallback'ами
            • get_active_filter_preset_id() — без fallback для Pure Query
            • get_page_filter_preset_id() — парсинг шорткода на странице
        - Управление пагинацией:
            • maybe_override_loop_pagination() — стандартный WC loop
            • render_shortcode_pagination() — шорткоды WooCommerce
            • render_load_more_button() — кнопка "Загрузить ещё"
        - Блокировка Layered Navigation WooCommerce:
            • bypass_woocommerce_layered_nav_filters()

Основные возможности

  • Неограниченное количество пресетов фильтров — создавайте разные наборы фильтров для разных страниц
  • Полная AJAX-фильтрация — переключение фильтров, сортировка и пагинация без перезагрузки страницы
  • Динамический Faceted Search — фильтры автоматически показывают только релевантные опции (скрывают пустые категории/атрибуты)
  • 4 типа отображения атрибутов: чекбоксы, цветовые swatches, текстовые кнопки, выпадающие списки
  • 3 типа отображения категорий: список, чекбоксы, dropdown
  • Ценовой фильтр с dual range slider — два ползунка и числовые поля ввода
  • Фильтр по наличию — "В наличии" и "Со скидкой"
  • Встроенная сортировка товаров — 6 вариантов сортировки
  • Два макета — горизонтальный (строка dropdown'ов) и вертикальный (сайдбар)
  • Раздельные настройки layout для desktop и mobile
  • Три режима пагинации: постраничная, "Загрузить ещё" (Load More), отключена
  • Интеграция со стандартными шорткодами WooCommerce — [products], [sale_products], [best_selling_products], [recent_products], [product_category]
  • Совместимость с Divi et_pb_shop — работает с модулем магазина Divi
  • Интеграция с Pure Query — расширенная работа с кастомными запросами
  • Умное кэширование — AJAX-ответы кэшируются на 2 минуты для снижения нагрузки
  • Защита от злоупотреблений — rate limiting анонимных AJAX-запросов (макс. 120 запросов в минуту)
  • Монохромный fashion-стиль — минималистичный чёрно-белый дизайн, легко кастомизируется

Конфигурация (Админ-панель)

Список пресетов

В админ-панели отображается таблица всех созданных пресетов с информацией:

  • Название — внутреннее имя пресета
  • Layout — выбранные макеты для desktop и mobile
  • Компоненты — список включённых фильтров (категории, цена, наличие, сортировка, атрибуты)
  • Шорткод — готовый шорткод для копирования

Доступные действия: Добавить новый, Редактировать, Удалить.

Создание/Редактирование пресета

Общие настройки

ПараметрОписание
Название фильтраВнутреннее имя для администрирования
ID контейнера (target_query_id)HTML ID контейнера с товарами (без #). Указывается для точной привязки к Pure Query. Если оставить пустым — используется автоматическое определение цели
Desktop LayoutHorizontal (строка dropdown'ов) или Vertical (сайдбар)
Mobile LayoutHorizontal (аккордеон) или Vertical (вертикальный стек)
Товаров на страницеКоличество товаров. Пусто = настройки WooCommerce по умолчанию
ПагинацияНе показывать, По страницам, Кнопка "Загрузить ещё"

Стандартные фильтры

Категории (вкл/выкл)

  • Заголовок секции (по умолчанию "Категории")
  • Тип отображения: Sleek Text List (список ссылок), Checkboxes, Monochrome Dropdown
  • Порядок сортировки (число)

Цена (вкл/выкл)

  • Заголовок секции (по умолчанию "Цена")
  • Порядок сортировки

Наличие (вкл/выкл)

  • Заголовок секции (по умолчанию "Наличие")
  • Порядок сортировки

Сортировка (вкл/выкл)

  • Заголовок секции (по умолчанию "Сортировка")
  • Сортировка по умолчанию: Исходная, По популярности, По рейтингу, По новизне, Цена: по возрастанию, Цена: по убыванию
  • Порядок сортировки

Атрибуты товаров

Для каждого атрибута WooCommerce (Size, Color и т.д.) доступны:

ПараметрОписание
Вкл/ВыклЧекбокс включения атрибута в фильтр
ЗаголовокОтображаемый заголовок секции
Тип отображенияStandard Checkboxes, Color Swatches, Text Buttons, Dropdown List
ПорядокЧисло для сортировки секций
Сортировка терминовWooCommerce Order, Name (Alphabet), Term ID, Product Count

Детальное описание блоков фильтрации

Категории

  • На страницах категорий показываются только дочерние подкатегории текущей категории
  • На странице магазина (shop) показываются все категории иерархически
  • Если у текущей категории нет подкатегорий, блок категорий скрывается
  • Работает динамический подсчёт: отображаются только категории, содержащие товары после применения других фильтров
  • Три типа отображения:
  • Sleek Text List — список ссылок с количеством товаров, активная подсвечивается жирным
  • Checkboxes — чекбоксы с названием и количеством
  • Monochrome Dropdown — выпадающий список с вложенностью и префиксами

Ценовой диапазон

  • Dual range slider — два ползунка для минимальной и максимальной цены
  • Числовые поля ввода — можно ввести цену вручную, отображаются с символом валюты
  • Значения автоматически подстраиваются под актуальный диапазон цен отфильтрованных товаров
  • Минимальные/максимальные значения рассчитываются из таблицы wc_product_meta_lookup

Наличие (Stock Status)

  • Чекбокс "В наличии" — instock
  • Чекбокс "Со скидкой" — onsale (товары, участвующие в распродаже)

Сортировка (Product Sorting)

6 вариантов:

  1. Исходная сортировка (menu_order) — по умолчанию
  2. По популярности (popularity)
  3. По рейтингу (rating)
  4. По новизне (date)
  5. Цены: по возрастанию (price)
  6. Цены: по убыванию (price-desc)

Сортировка встроена непосредственно в фильтр, а не использует стандартный WooCommerce dropdown. Это позволяет AJAX-обновлению корректно подхватывать сортировку.

Атрибуты (4 типа отображения)

1. Standard Checkboxes

  • Классические чекбоксы с кастомным чёрным квадратом
  • Автоматически разбиваются на колонки: 2 колонки при >10 элементах, 3 колонки при >20

2. Color Swatches (цветовые образцы)

  • Круглые цветные маркеры (14px)
  • Автоматическое определение цвета: сначала проверяются meta-поля (pure_attr_color, color, hex, bg_color и др.), затем встроенная карта цветов (включая русские названия: "чёрный", "белый", "красный" и т.д.)
  • Активный цвет обводится чёрной рамкой
  • Сетка 10xN: максимум 10 цветов в колонке
  • Для светлых цветов (белый, молочный) добавляется серая рамка

3. Text Buttons (текстовые кнопки)

  • Например для размеров (S, M, L, XL)
  • Минимальная ширина 32px, высота 32px
  • Активное состояние: чёрный фон, белый текст
  • Hover: чёрная рамка

4. Dropdown List (выпадающий список)

  • Стилизованный select с кастомной SVG-стрелкой
  • Первый пункт: "Выбрать [Название]"

Динамический Faceted Search

Плагин использует механизм умного пересчёта фильтров. Когда пользователь выбирает фильтр:

  1. Определяются ID товаров, соответствующие выбранным фильтрам (кроме одного — "исключённого" фильтра)
  2. Для исключённого фильтра пересчитываются доступные опции — показываются только те, у которых есть товары в текущей выборке
  3. Это работает для:
  • Категорий — показываются только категории с товарами
  • Атрибутов — показываются только термины атрибутов с товарами (с учётом вариаций!)
  • Цены — диапазон подстраивается под актуальные цены

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

AJAX-фильтрация

Как работает

  1. При изменении любого фильтра (чекбокс, select, ползунок) JS собирает все данные формы
  2. Отправляет POST-запрос на admin-ajax.php с action pure_filter_ajax
  3. Сервер строит WP_Query с учётом всех фильтров и возвращает JSON:
  • products_html — HTML блока товаров
  • filters_html — обновлённый HTML блоков фильтрации (для faceted search)
  • pagination_html — HTML пагинации
  • only_items_html — только элементы <li> (для load more на страницах >1)
  • max_num_pages — общее количество страниц
  • pagination_type — тип пагинации

Безопасность

  • Rate limiting: максимум 120 AJAX-запросов в минуту для анонимных пользователей
  • Лимит на размер строки запроса: 8192 символа
  • Лимит на количество параметров: 30
  • Максимальная страница: 1000

Кэширование

  • AJAX-ответы кэшируются на 2 минуты (транзиенты WordPress)
  • Ключ кэша включает: страницу, фильтры, категорию, колонки, пресет, query ID, shop URL, ID сессии
  • Это обеспечивает быстрый повторный запрос без полного перестроения запроса

Макеты (Layouts)

Desktop

Horizontal (по умолчанию):

  • Все секции фильтра выстраиваются в ряд с помощью flexbox
  • Каждая секция — это заголовок-кнопка, при нажатии открывается dropdown с содержимым
  • Плавная анимация появления (fadeInSlide)
  • Кнопка "Сбросить фильтры" прижата к правому краю
  • Идеально для широких экранов

Vertical:

  • Секции располагаются вертикально, как в сайдбаре
  • Весь контент всегда виден (без dropdown'ов)
  • Тонкая правая граница для визуального отделения

Mobile (<768px)

Horizontal:

  • Секции располагаются вертикально (аккордеон)
  • Каждый заголовок — кнопка с иконкой стрелки
  • Контент открывается/закрывается по клику
  • Колонки для чекбоксов уменьшаются до 2

Vertical:

  • Вертикальный стек секций
  • Каждая секция разделена тонкой линией
  • Весь контент всегда виден

Пагинация

Три режима:

По страницам (Pages)

  • Стандартная постраничная навигация WooCommerce
  • Номера страниц в чёрно-белом стиле
  • Активная страница — чёрный фон, белый текст
  • Адреса страниц корректируются: берётся реальный URL магазина вместо admin-ajax.php

Загрузить ещё (Load More)

  • Кнопка "Загрузить ещё" в центре под товарами
  • При загрузке следующей страницы товары добавляются к уже отображённым (append)
  • Кнопка блокируется на время загрузки (класс pure-loading)
  • Скрывается, когда все товары загружены
  • На прямом визите /page/X/ загружаются товары со страниц 1..X включительно

Не показывать

  • Стандартная пагинация WooCommerce удаляется
  • Полезно для лендингов или страниц, где должны отображаться все товары сразу

Совместимость с Pure Query

Плагин может работать в паре с Pure Query:

  • Привязка по target_query_id — фильтр может быть явно привязан к конкретному блоку Pure Query
  • Управление пагинацией — фильтр переопределяет пагинацию Pure Query (постраничная, load more, отключена)
  • Совместная сортировка — используется единая система сортировки Pure Query
  • Рендеринг карточек товаров — при активном Pure Query товары отображаются через Pure_Query_Render::render_card_for_product(), что обеспечивает кастомный дизайн карточек

Фильтр не вмешивается в независимые блоки Pure Query на страницах без фильтра.

Работа со стандартными шорткодами WooCommerce

Плагин перехватывает следующие шорткоды WooCommerce:

  • [products]
  • [product_category]
  • [recent_products]
  • [sale_products]
  • [best_selling_products]
  • Модуль et_pb_shop (Divi)

Что делает:

  • Применяет активные GET-фильтры к запросу шорткода
  • Переопределяет количество товаров на странице (из пресета)
  • Для load more — скрывает стандартную пагинацию WooCommerce

Шорткод

[pure_filter id="preset_xxx"]

Где id — идентификатор пресета, созданного в админ-панели. Шорткод можно разместить на любой странице, в том числе на странице магазина.

На страницах категорий фильтр автоматически определяет текущую категорию контекстно (через is_product_category()) и передаёт её в AJAX-запросы.

Стилизация (CSS)

Плагин поставляется с полностью кастомным CSS в монохромном стиле:

  • Чёрно-белая палитра — основные цвета: #000000 (чёрный), #ffffff (белый), #e5e5e5 (серый), #888888 (тёмно-серый)
  • Типографика — -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
  • Все буквы заглавные — text-transform: uppercase для заголовков и элементов
  • Минималистичные анимации — плавные переходы (0.2s ease), масштабирование при hover
  • Кастомные чекбоксы — скрыты нативные, используются стилизованные чёрные квадраты с галкой
  • Кастомные селекты — скрыт нативный appearance, добавлена SVG-стрелка
  • Лоадер — тонкая чёрная линия, анимированная от левого края к правому

В админ-панели используется аналогичный стиль для единообразия.

Дополнительные технические детали

Обработка вариативных товаров

Плагин корректно обрабатывает вариативные товары:

  • Для простых товаров — стандартные term_relationships
  • Для вариативных — поиск по postmeta attribute_pa_* с учётом stock_status
  • Вариации "Any" (пустое значение meta) также учитываются через term_relationships родительского товара

Блокировка стандартной Layered Nav

Плагин принудительно отключает встроенную Layered Navigation WooCommerce через bypass_woocommerce_layered_nav_filters(), чтобы избежать конфликтов и дублирования фильтрации.

Автоматическое определение пресета

Плагин определяет активный пресет следующим образом:

  1. По POST (AJAX) — из параметра preset_id
  2. По шорткоду на странице — парсинг [pure_filter id="..."]
  3. Проверка страницы магазина и страниц категорий
  4. Fallback — первый пресет в базе

Другие плагины

Pure Wishlist & Compare

Pure Attributes

Pure Filter

Pure Query

Pure Gallery

45
Telegram Почта info@pureseo.ru Телефон +7 (903) 757-15-01