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

Версия плагина: 3.8.2.1
 
WordPress плагин JetSmartFilters

Особенности плагина

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

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

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

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

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

Спецификации:

Дата выхода: 06-09-2017
Дата обновления: 03-06-2026
Тип расширения: Платный
Лицензия: GPL
Тематика: Специфические для Elementor
Совместимость: W5.x W6.x
Включает в себя: Плагин
Языковые пакеты: Английский
Разработчик: Crocoblock

Рейтинг:
4.485401459854 1 1 1 1 1 (Оценок: 274)
4.485401459854 274

Скачивание по подписке!

Вам необходимо авторизоваться на сайте и приобрести клубную подписку!

Поделись с друзьями!

 

Руководство по настройке JetSmartFilters для фильтруемых каталогов WordPress

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

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

В примерах ниже упоминаются Elementor, редактор блоков WordPress, Bricks, JetEngine, JetWooBuilder и WooCommerce, потому что именно с такими provider-сценариями плагин чаще всего связывает фильтры. Если часть этих инструментов не установлена на вашем сайте, используйте те же принципы: сначала определите источник данных, затем блок вывода, потом свяжите фильтр с нужным provider и проверьте результат на странице.

JetSmartFilters в руководстве по настройке фильтров WordPress
Обложка показывает логику руководства: фильтр в админ-панели, связанный provider и проверка результата в каталоге.

Какую задачу решает плагин в реальном проекте

Главная роль JetSmartFilters - дать посетителю быстрый способ сузить большой список записей, товаров или объектов. Для маленького блога из десяти публикаций это может быть лишним, но для каталога с десятками параметров фильтр часто становится основным способом навигации. Пользователь не хочет читать весь архив подряд. Он выбирает категорию, диапазон цены, рейтинг, дату, цвет, район или другое условие и ожидает, что список сразу покажет подходящие элементы.

По официальным материалам Crocoblock плагин работает с Elementor, Gutenberg, Bricks и Divi, а также поддерживает WooCommerce-сценарии. В документации отдельно описаны активные фильтры, теги, поиск, сортировка, пагинация, индексатор, Ajax-фильтрация, URL aliases и настройка permalink-структуры. Это важно: перед вами не просто "фильтр по категории", а набор компонентов, из которых можно собрать faceted search - многофакторный поиск по нескольким признакам.

Практически это означает три уровня работы:

  • Данные: таксономии, поля, атрибуты WooCommerce, записи, значения из JetEngine или другого поддержанного источника.
  • Фильтр: Checkboxes, Select, Range, Date Range, Radio, Search, Rating, Sorting, Visual и другие типы, выбранные под конкретный сценарий.
  • Provider: Listing Grid, Products Grid, Elementor Pro Loop Grid, WooCommerce archive, карта, таблица или другой блок, который должен обновиться после выбора фильтра.

Если один из этих уровней выбран неправильно, пользователь видит пустой список, нулевые счетчики, неработающую пагинацию или фильтр, который меняет не тот блок. Поэтому настройка JetSmartFilters начинается не с дизайна чекбоксов, а с карты данных и вывода.

Кому JetSmartFilters подходит, а где лучше выбрать другой подход

Плагин особенно полезен для сайтов, где контент уже структурирован. У интернет-магазина это категории, атрибуты, цена, наличие и рейтинг. У каталога недвижимости - тип объекта, город, район, количество комнат, площадь, цена и статус. У блога или базы знаний - рубрики, авторы, даты, сложность материала и ключевые темы. JetSmartFilters раскрывается, когда у карточек есть понятные поля, а посетитель действительно ищет по нескольким признакам.

Хорошие сценарии

JetSmartFilters стоит рассматривать, если на сайте уже есть или планируется один из таких сценариев:

  • Каталог товаров WooCommerce, где пользователю нужны фильтры по цене, категории, атрибутам, рейтингу и доступности.
  • Каталог объектов на JetEngine, где Listing Grid выводит записи пользовательского типа и метаполя.
  • Портфолио, база проектов, каталог специалистов, мероприятий или вакансий с несколькими параметрами отбора.
  • Страница с несколькими Listing Grid, где каждый блок нужно фильтровать отдельно через Query ID.
  • Архив, где важны активные теги, сброс фильтров, сортировка и пагинация без постоянной перезагрузки страницы.

Когда плагин может быть лишним

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

Быстрый ориентир: JetSmartFilters хорошо подходит там, где пользователь должен комбинировать условия. Если посетителю достаточно перейти в одну рубрику, обычного меню или ссылки на архив может хватить.

Что проверить перед установкой и первым включением

Перед установкой полезно сделать короткую ревизию сайта. Это экономит время: большинство проблем с фильтрами возникает не из-за самого факта установки, а из-за неподготовленного provider, разных Query ID, отключенных типов provider в общих настройках или данных, которые не совпадают с выбранным типом фильтра.

Структура данных

Сначала ответьте на вопрос: что именно должен выбирать посетитель? Если это категории и теги, используйте таксономии. Если это цена, площадь, дата, числовой рейтинг или логический признак, чаще нужен источник из пользовательского поля или атрибута. Если значения вводятся вручную, убедитесь, что они одинаково написаны во всех объектах. Фильтр не понимает, что "new", "New" и "новый" - одно и то же состояние.

Для WooCommerce проверьте, что атрибуты товаров заполнены системно, а не записаны в описании. Для JetEngine проверьте ключи метаполей и тип поля. В документации Crocoblock отдельно отмечается случай Checkboxes meta field: его нельзя путать с обычным Checkboxes filter, потому что для JetEngine checkbox-метаполя есть отдельный переключатель.

Блок вывода

Дальше проверьте, какой блок на странице выводит карточки. Для JetEngine это может быть Listing Grid. Для магазина - WooCommerce archive, Products Grid или решение на JetWooBuilder. Для Elementor Pro Loop Grid есть отдельные условия: в документации Crocoblock указывается необходимость включить соответствующий provider в Smart Filters settings, а также проверить настройки loop grid, если фильтр не применяется.

Если на странице несколько сеток, карт или списков, заранее продумайте Query ID. Один фильтр должен понимать, какой блок он обновляет. Без этого он может примениться к первому найденному provider или конфликтовать с соседним блоком.

Кеш, оптимизация и тестовая страница

Ajax-фильтрация чувствительна к агрессивной оптимизации JavaScript, кешу страниц и отложенной загрузке скриптов. Это не значит, что кеш нужно отключать навсегда. Но первый запуск лучше делать на тестовой странице, без минификации и объединения скриптов, чтобы понять базовое поведение. После этого включайте оптимизацию обратно по одному блоку и проверяйте, не сломалась ли фильтрация.

  • Создайте тестовую страницу с одним provider и одним фильтром.
  • Очистите кеш сайта, браузера и оптимизирующего плагина.
  • Проверьте консоль браузера на JavaScript-ошибки после применения фильтра.
  • Сравните поведение для администратора и обычного посетителя в приватном окне.

Установка и первичная проверка без лишнего риска

Установка WordPress-плагина сама по себе стандартна: загрузить ZIP-файл, активировать плагин и перейти к настройкам. Важно не останавливаться на сообщении об успешной активации. Для JetSmartFilters рабочая проверка начинается только тогда, когда создан хотя бы один фильтр, он размещен на странице и связан с provider.

Минимальная проверка после активации

  1. Откройте админ-панель WordPress и проверьте, появился ли раздел Smart Filters.
  2. Перейдите в настройки JetSmartFilters через Crocoblock или через Smart Filters settings.
  3. В General Settings оставьте включенными только те provider, которые реально нужны на сайте.
  4. Создайте тестовый фильтр с простым источником данных, например таксономией категории.
  5. Добавьте фильтр и один Listing Grid или Products Grid на тестовую страницу.
  6. Примените фильтр в публичной части сайта и убедитесь, что меняется именно нужный список.

Такой тест кажется слишком простым, но он отделяет проблему настройки фильтра от проблемы данных. Если фильтр по категории работает, а сложный фильтр по метаполю нет, значит, искать нужно в ключе поля, типе данных, сравнении, Query ID или индексаторе.

Что включать не сразу

Не стоит в первый день включать все provider, все Ajax-варианты, SEO rules, permalink-структуру фильтров и сложные URL aliases. Каждая такая функция полезна в своем месте, но она добавляет еще одну точку диагностики. Сначала добейтесь стабильного результата на обычной странице. Затем добавляйте Indexer, счетчики, активные теги, пагинацию, красивую URL-структуру и правила для индексируемых фильтрованных страниц.

Карта настройки: фильтр, источник данных, provider и Query ID

Самая важная настройка JetSmartFilters - не цвет и не размер чекбокса, а правильная связка между фильтром и тем, что он должен обновлять. В документации Crocoblock для Query ID прямо объясняется: это строковое значение, которое связывает filter widget с конкретным Listing Grid или другим provider. Когда на странице один список, фильтр часто работает и без явного ID. Но как только появляется несколько сеток, пагинация, сортировка, карта или кастомный запрос, одинаковый Query ID становится опорой стабильной фильтрации.

Карта настройки JetSmartFilters с источником данных и Query ID
Схема показывает, как источник данных, тип фильтра, provider и Query ID образуют одну рабочую цепочку.

Выбор типа фильтра

Тип фильтра выбирайте по тому, как пользователь принимает решение. Checkboxes удобны для множественного выбора: несколько брендов, категорий или особенностей. Radio подходит для взаимоисключающего выбора. Select экономит место, особенно если вариантов много. Range и Check Range применимы к числовым диапазонам: цена, площадь, возраст, длительность, рейтинг. Search нужен, когда посетитель помнит слово из названия, описания или связанного поля. Sorting не отсекает элементы, а меняет порядок выдачи.

Плохая практика - ставить один тип фильтра только потому, что он красивее смотрится в макете. Например, Visual filter хорошо работает, когда визуальное значение действительно помогает: цвет, материал, иконка, тип услуги. Если value у визуального элемента не заполнен или не совпадает с данными, фильтр выглядит правильно, но не дает результата.

Источник данных и Query Variable

В фильтре важно указать, откуда брать значения. Для таксономии это выбранная taxonomy. Для пользовательского поля - ключ поля. Для ручного списка - заданные значения. Для JetEngine могут появляться дополнительные источники: Custom Content Types, Glossary, Query Builder или Query Builder Switcher, если соответствующие модули включены.

Query Variable должен совпадать с тем, что реально используется в запросе. Если вы фильтруете по метаполю, проверьте точный ключ. Если по атрибуту WooCommerce, проверьте системное имя атрибута, а не красивую подпись на сайте. Если по taxonomy, не подставляйте случайный slug другой сущности.

Provider и Query ID

Provider отвечает за блок, который обновляется после выбора фильтра. В настройках фильтра обычно есть поле This filter for. Для Listing Grid выбирается JetEngine, для WooCommerce archive - соответствующий WooCommerce provider, для Elementor Pro Loop Grid - отдельный provider после его включения в общих настройках.

Если вы используете Query Builder, один и тот же идентификатор должен быть указан в запросе, в CSS ID или настройках provider, а также в поле Query ID самого фильтра. Для пагинации и сортировки действует то же правило: они должны смотреть на тот же Query ID, иначе пользователь отфильтрует список, нажмет вторую страницу и увидит сброшенный или неправильный результат.

Практическая проверка: придумайте Query ID один раз, например catalog-grid, и используйте его одинаково во всех связанных местах. Не добавляйте пробелы, не меняйте регистр букв и не копируйте ID с лишним символом в конце.

Индексатор, счетчики и URL: где включать осторожно

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

Связь Indexer JetSmartFilters со счетчиками и результатом фильтрации
Индексатор полезен для счетчиков и пустых значений, но его нужно связывать с правильным post type, provider и Query ID.

Когда включать Indexer

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

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

Счетчики и пустые значения

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

Если счетчики показывают ноль, не делайте вывод, что товаров нет. Симптом может означать другое: индексатор не видит нужный post type, filter source не совпадает с полем, Query ID не связан с provider, кастомный запрос не поддержан выбранной связкой или данные были импортированы без переиндексации.

URL Structure и SEO Rules

JetSmartFilters умеет работать с plain-структурой URL, permalink-структурой, aliases и SEO rules для отдельных фильтрованных страниц. Эти возможности полезны, когда фильтры создают действительно ценные посадочные состояния: например, категория + бренд + тип товара. Но они не должны включаться автоматически для всех комбинаций. Много фильтрованных URL без контроля может создать лишние страницы, дубли и слабые комбинации.

Безопасный подход такой: сначала настройте рабочую фильтрацию, затем определите 3-10 важных комбинаций, которые действительно нужны посетителям и поиску, и только после этого включайте SEO rules. В документации Crocoblock указывается ограничение по типам фильтров для rules и необходимость указывать page slug, provider, Query ID и allowed filters. Если вы не готовы поддерживать эти URL, лучше оставить обычную фильтрацию без индексации таких страниц.

Практический пример: каталог объектов с фильтрами по типу, цене и району

Разберем типовой сценарий: на сайте есть каталог объектов недвижимости или услуг, созданный через JetEngine Listing Grid. Нужно, чтобы посетитель выбрал тип объекта, диапазон цены и район, а список обновился без лишней путаницы. Эта же логика переносится на магазин, каталог автомобилей, базу специалистов или подборку курсов.

Цель

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

Подготовка

  • У записей есть пользовательский тип, например property или service.
  • Тип объекта и район оформлены как таксономии или как чистые метаполя с одинаковыми значениями.
  • Цена хранится как число, а не как строка с символами валюты внутри поля.
  • Создан Listing Grid, который выводит карточки нужного типа записи.
  • На странице пока один основной provider, чтобы первый тест был чистым.

Шаги настройки

  1. Создайте Checkboxes или Select filter для типа объекта. В качестве Data Source выберите нужную таксономию или поле.
  2. Создайте Range filter для цены. Проверьте, что ключ поля соответствует числовому метаполю.
  3. Создайте Select или Radio filter для района, если район выбирается одним значением.
  4. Откройте страницу с Listing Grid и задайте provider понятный CSS ID, например property-grid.
  5. В каждом фильтре выберите правильный provider в This filter for и укажите тот же Query ID.
  6. Добавьте Active Tags и Remove Filters, чтобы пользователь видел выбранные условия и мог быстро очистить страницу.
  7. Если есть пагинация или сортировка, укажите им тот же Query ID.
  8. Сохраните страницу, очистите кеш и проверьте публичную часть сайта в приватном окне.

Как выбрать Apply type для такого сценария

Для каталога с небольшим числом условий обычно удобен Ajax-режим, когда посетитель сразу видит обновленный список. Для страницы с тяжелыми запросами, несколькими диапазонами и дорогой сортировкой иногда лучше использовать кнопку применения: пользователь сначала выбирает условия, затем запускает один запрос. Это снижает число промежуточных Ajax-обновлений и делает поведение понятнее на мобильном экране.

Если выбираете применение по кнопке, проверьте, что кнопка действительно показана. В troubleshooting-документации Crocoblock отдельное внимание уделено связке Apply type, Apply on и Show apply button. Ошибка выглядит банально: фильтр настроен правильно, но пользователь не видит кнопку, которая должна отправить выбранные условия.

Как проверить, что фильтр использует правильные данные

Возьмите одну карточку из каталога и вручную выпишите ее значения: тип, район, цену, статус. Затем выберите на сайте ровно эти условия. Карточка должна остаться в выдаче. После этого выберите заведомо несовместимое условие, например другой район или диапазон цены ниже фактической. Карточка должна исчезнуть. Такой тест проще, чем сразу проверять десятки комбинаций, потому что он показывает, совпадает ли логика фильтра с реальными данными записи.

Проверка результата

Правильный результат выглядит так: выбор одного района меняет список, выбор диапазона цены дополнительно сужает его, Active Tags показывает выбранные условия, кнопка сброса возвращает исходный список, а переход на другую страницу пагинации не ломает фильтрацию. Если фильтр срабатывает только после перезагрузки, проверьте Apply type и совместимость с кешем. Если фильтр меняет соседний список, проверьте Query ID.

Нюанс, который часто мешает

Многие ошибки появляются после копирования блока. Вы настроили первый Listing Grid, продублировали его для другого раздела, а CSS ID остался прежним. Визуально страница выглядит нормально, но два provider получают одинаковый идентификатор. В таком случае фильтры могут обновлять оба списка или непредсказуемо выбирать один из них. После копирования всегда проверяйте уникальность Query ID и CSS ID.

Проверка результата на сайте: скорость, удобство и доступность

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

Что проверить на публичной части

  • Фильтр срабатывает на первом выборе, без второго клика и без перезагрузки, если выбран Ajax-сценарий.
  • Пустая выдача показывает понятное сообщение, а не просто исчезнувшую сетку.
  • Active Tags или Active Filters помогают увидеть, какие условия уже включены.
  • Remove Filters возвращает список в исходное состояние.
  • Пагинация, сортировка и поиск используют тот же Query ID, что и основной filter/provider.
  • На мобильном экране фильтры не занимают всю высоту страницы без возможности быстро перейти к результату.
  • Клавиатурная навигация не ломается, если включены настройки доступности.

Как не ухудшить скорость

Большой каталог с несколькими фильтрами может создавать тяжелые запросы. Поэтому используйте Indexer там, где он уместен, отключайте лишние provider в общих настройках, не выводите все возможные значения без необходимости и не смешивайте слишком много условий на одной странице. Если сайт использует оптимизирующий плагин, добавляйте исключения аккуратно: сначала определите, какой скрипт или Ajax-запрос ломается, и только потом исключайте его из отложенной загрузки или объединения.

Для SEO не обещайте себе автоматического роста из-за фильтров. Фильтр помогает пользователю, а поисковые страницы требуют отдельной стратегии. Индексировать стоит только полезные комбинации с понятным спросом и уникальным смыслом. Остальные состояния лучше оставить как пользовательскую навигацию.

Практичные идеи применения для разных типов сайтов

JetSmartFilters не ограничивается магазином. Его сильная сторона - одинаковая логика для разных типов контента: есть данные, есть интерфейс выбора, есть provider с результатом. Ниже несколько сценариев, которые помогают выбрать не только фильтр, но и способ проверки.

Сценарии применения JetSmartFilters для магазина и каталога
Decision board помогает выбрать сценарий фильтрации по цели, риску и ожидаемому результату.

Интернет-магазин WooCommerce

Для магазина обычно важны цена, категория, атрибуты, рейтинг, наличие и сортировка. Хорошая схема не заставляет покупателя выбирать десять условий сразу. Начните с 3-5 самых понятных фильтров и добавьте Active Tags. Если используете WooCommerce archive или JetWooBuilder, проверьте provider именно для этого вывода, а не для обычного Listing Grid.

Каталог недвижимости, автомобилей или услуг

Здесь важны диапазоны, география и тип объекта. Range filter помогает с ценой или площадью, Select - с городом или районом, Checkboxes - с удобствами или параметрами. Если есть несколько списков, например каталог и карта, продумайте дополнительные provider. Один фильтр может быть связан с несколькими блоками, но только если это осознанная настройка, а не случайный побочный эффект.

База знаний или учебный блог

Для контентного сайта фильтры должны помогать найти материал по уровню, теме, автору, типу урока или дате. Search filter полезен, когда посетитель помнит слово из заголовка. Alphabet filter может быть уместен для справочника терминов. Но если рубрик мало, не перегружайте страницу сложной системой: иногда достаточно Select по теме и сортировки.

Справочник специалистов или профилей

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

Безопасное улучшение внешнего вида фильтров без правки плагина

JetSmartFilters дает настройки оформления в поддержанных конструкторах, а Crocoblock также связывает часть стилизации с JetStyleManager. Но иногда нужно небольшое единое оформление панели фильтров, которое не зависит от редактирования файлов плагина. Безопасный вариант - добавить собственный класс к колонке или контейнеру с фильтрами, а CSS хранить в дочерней теме, настройках темы или проверенном плагине для сниппетов.

Ниже пример, который не правит ядро WordPress и не обращается к внутреннему API JetSmartFilters. Он стилизует только контейнер, которому вы сами зададите класс catalog-filters. Если конкретная тема или конструктор выводит другую разметку, CSS можно сузить или удалить без потери данных.

.catalog-filters {
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
}

.catalog-filters label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  line-height: 1.35;
}

.catalog-filters button,
.catalog-filters input[type="submit"] {
  min-height: 40px;
  border-radius: 8px;
}

Проверка простая: добавьте класс контейнеру, очистите кеш, откройте страницу в приватном окне и убедитесь, что панель стала аккуратнее, а фильтрация не изменила поведение. Откат тоже простой: удалите класс или CSS-блок. Если после CSS ломается верстка, значит, селекторы слишком широкие для вашей темы. Сузьте их до конкретной секции страницы.

Почему фильтры не работают и как искать причину

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

Диагностика ошибок JetSmartFilters с симптомом причиной и исправлением
Карта диагностики помогает идти по симптомам: provider, Query ID, Indexer, Apply button, Visual filter и кеш.

Фильтр отображается, но список не меняется

Симптом: чекбоксы, select или range видны на странице, но после выбора список остается прежним. Возможная причина - неверный provider в This filter for, отсутствующий Query ID, отключенный provider в General Settings или конфликт с кешем JavaScript.

Проверьте, включен ли нужный provider в настройках JetSmartFilters. Затем убедитесь, что Query ID одинаковый у фильтра, Listing Grid или другого provider, пагинации и сортировки. Если используется Elementor Pro Loop Grid, проверьте отдельные настройки из документации Crocoblock: включение provider, состояние Is Filterable и отключение встроенной пагинации, если используется отдельный Pagination widget.

Счетчики показывают ноль

Симптом: значения фильтра видны, но рядом у всех нули, или пустые значения скрывают рабочие варианты. Возможная причина - Indexer не видит post type, не была выполнена переиндексация после импорта, источник данных выбран неправильно или фильтр не связан с provider.

Откройте Crocoblock > JetPlugins Settings > JetSmartFilters > Indexer Settings. Проверьте Use Indexed filters, автоиндексацию и список Index Post Types. Затем откройте список фильтров и выполните индексацию вручную. Если данные были импортированы через CSV, REST API, WP-CLI или созданы фронтенд-формой, ручная индексация особенно важна.

Когда проблема в данных, а не в Indexer

Indexer не исправляет грязные значения. Если в одном товаре цвет записан как Blue, в другом как blue, а фильтр ожидает taxonomy term, счетчики могут выглядеть странно даже после переиндексации. То же относится к числам, сохраненным как текст с валютой, датам в разных форматах и метаполям, которые заполнены не у всех карточек. В таком случае сначала нормализуйте данные, затем повторите индексацию.

Когда нужна ручная переиндексация

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

Пагинация сбрасывает результат

Симптом: первая страница фильтруется правильно, но переход на следующую страницу возвращает полный список или пустую выдачу. Обычно это говорит о том, что Pagination widget не связан с тем же Query ID, что фильтр и provider. Укажите одинаковое значение во всех связанных элементах и проверьте, что встроенная пагинация provider не конфликтует с отдельным виджетом пагинации.

Apply button не появляется или не запускает фильтрацию

Симптом: выбран режим применения через кнопку, но кнопки нет или она не влияет на список. В документации по troubleshooting Crocoblock отмечает связку Apply type и Apply on: если фильтр должен срабатывать по кнопке, убедитесь, что включен показ apply button. Если выбрана Ajax или Mixed-логика с кликом по кнопке, кнопка тоже должна быть показана.

Visual filter выглядит правильно, но не дает результата

Симптом: красивые визуальные варианты отображаются, но выбор не фильтрует список. Частая причина - не заполнено значение option или оно не совпадает с данными. Проверьте value каждого визуального пункта, источник данных и сравнение. Если визуал связан с цветом или изображением, не путайте картинку с реальным значением фильтра.

Фильтр ломается после включения оптимизации

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

Когда откатывать настройку: если после включения SEO rules, permalink-структуры или сложного custom query фильтр стал непредсказуемым, временно вернитесь к простому provider и одному Query ID. Сначала восстановите базовую фильтрацию, затем снова добавляйте сложность.

Видео по диагностике JetSmartFilters

У Crocoblock есть точный ролик по теме "JetSmartFilters Not Working: 7 Things You Need to Check". Его стоит смотреть не как общий обзор плагина, а как визуальную шпаргалку по симптомам: настройки provider, индексатор, Apply button, Query ID, несколько элементов на странице и Visual filter. Это закрывает intent "JetSmartFilters не работает" и помогает сверить админ-панель с описанной выше диагностикой.

Вопросы, которые обычно появляются после первой настройки

Можно ли использовать JetSmartFilters без Elementor?

Да, официальные материалы Crocoblock описывают работу с Gutenberg, Bricks и Divi, а не только с Elementor. Но конкретные шаги размещения фильтра зависят от выбранного конструктора. Принцип сохраняется: создать фильтр в админ-панели, добавить соответствующий блок или элемент на страницу и связать его с provider.

Нужен ли JetEngine для каждого сценария?

Не для каждого, но для многих каталогов JetEngine является основной связкой, потому что дает пользовательские типы записей, поля, Listing Grid и Query Builder. Zemez-документация для старого Elementor-сценария прямо отмечает, что для вывода listings обычно нужен JetEngine или JetWooBuilder. Если вы фильтруете WooCommerce archive, сценарий может отличаться.

Почему фильтр работает на одной странице и не работает на другой?

Чаще всего различается provider, Query ID или источник данных. Проверьте, что на второй странице включен нужный provider, фильтр смотрит на правильный блок, CSS ID не дублируется, а данные в карточках действительно содержат выбранные значения.

Стоит ли включать Indexer сразу?

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

Можно ли сделать SEO-страницы для фильтров?

Можно, если в вашей версии и настройках доступны SEO rules и URL-настройки. Но индексировать стоит только полезные комбинации, которые имеют самостоятельный смысл. Массовое открытие всех фильтрованных URL обычно создает дубли и слабые страницы.

Что делать, если фильтры ломаются после кеширования?

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

Подойдет ли плагин для мультиязычного сайта?

Мультиязычность требует отдельной проверки. В источниках WPML есть errata по случаям, когда фильтры JetSmartFilters не работали или не переводились корректно на публичной части. Поэтому перед запуском на многоязычном сайте проверьте каждую языковую версию, query-параметры, перевод значений и результат на фронтенде.

Когда JetSmartFilters будет удачным выбором

JetSmartFilters стоит использовать, если на сайте есть структурированные данные, понятный provider и реальная потребность в многофакторной фильтрации. Он особенно хорошо ложится на проекты с Crocoblock, JetEngine, WooCommerce и конструкторами, где фильтр должен не просто вести на архив, а обновлять конкретный список, карту, таблицу, пагинацию и активные теги.

Перед боевым запуском проверьте три вещи: источник данных заполнен чисто, Query ID совпадает у всех связанных элементов, а результат на публичной части понятен обычному посетителю. После этого можно добавить Indexer, счетчики, URL-настройки, SEO rules и аккуратную стилизацию. Если вы прошли эти шаги и хотите протестировать плагин на своем сайте, ближе к блоку загрузки можно получить версию для WordPress и проверить его сначала на копии страницы или тестовом окружении.

Лучший результат получается не тогда, когда на странице много фильтров, а когда каждый фильтр отвечает на понятный пользовательский вопрос. Покупатель, читатель или клиент должен быстрее найти нужный объект, а администратор - понимать, где искать причину, если фильтрация перестала работать.

Автор: Редакция JoomFox.org

Вы не зарегистрированы, чтобы оставлять комментарии.