Фильтрация и сортировка данных в коллекции

Зачем это нужно и как работает

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

Фильтрация работает для всех страниц пагинации — для этого не нужно писать дополнительный код.

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

Для настройки фильтрации и сортировки понадобится:

Создать форму (или несколько форм) для управления поиском, фильтрацией и сортировкой элементов коллекции на странице.

Добавить пользовательские атрибуты, которые будут связывать форму(ы) с коллекцией и задавать правила поиска, фильтрации и сортировки.

Смотрите видео:

Kinescope
VK Video
RuTube
YouTube
Vimeo

Шаг 1. Создайте форму с элементами управления

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

Форма может содержать следующие элементы:
— Input: для поиска или для диапазона чисел или дат (несколько инпутов)
— Checkbox, Radio, Select: для управления фильтрацией и сортировкой
— Button: если поиск/фильтрация/сортировка будут осуществляться при нажатии на кнопку

💡 Как создать форму для управления поиском, фильтрацией и сортировкой

Добавьте на страницу виджет Form.

Кастомизируйте форму под ваши фильтры и сортировку.

Удалите лишние поля, которые были добавлены в форму по умолчанию.

Добавьте в форму нужные поля. Например:

Input — для поиска в коллекции

Radio-кнопки или выпадающий список Select — для выбора одного из вариантов. Например, выбор производителя или сортировка по цене.

Checkbox — для множественного выбора или переключателя. Например, выбор несколько категорий товаров или показ только товаров по акции.

Button — если нужно, чтобы фильтрация или сортировка работали после нажатия на кнопку.

Для каждого поля выбора (Select, Checkbox, Radio) добавьте список вариантов для фильтрации или сортировки.

Выберите поле → Настройки → Элементы списка

Пример: Select для сортировки товаров

Результат:

Пример: Checkbox для фильтрации товаров по категориям (множественный выбор)

Результат:

Пример: Radio для фильтрации товаров по производителю (выбор по одному производителю)

Результат:

Для одной коллекции можно использовать несколько фильтров и форм.

Шаг 2. Свяжите форму с коллекцией

С помощью пользовательских атрибутов свяжите форму с коллекцией, которую нужно фильтровать или сортировать.

💡 Как добавить пользовательский атрибут для формы

Выберите форму и откройте Пользовательские атрибуты в Настройках на правой панели. Нажмите на «+», чтобы создать атрибут.

Название:

data-filter-form-id

Значение — задайте уникальный идентификатор для вашей формы. Значение может быть любым числом.

💡 Как добавить пользовательский атрибут для коллекции

Выберите виджет Collection, который нужно фильтровать, и откройте Пользовательские атрибуты в Настройках на правой панели. Нажмите на «+», чтобы создать атрибут.

Название:

data-filter-form-id-array

Значение — должно совпадать с атрибутом формы:

Важно: Одна коллекция может управляться несколькими формами — можно указать список ID форм через запятую.

Шаг 3. Настройте поиск, фильтрацию и сортировку

Для каждого элемента управления поиском, фильтрацией или сортировкой (Input, Select, Checkbox, Radio) создается своя настройка фильтра с помощью пользовательского атрибута. Это позволяет настроить поиск, фильтрацию и сортировку по нужным полям.

🔎 Поиск

Добавьте элементу Input Group пользовательский атрибут.

Важно: Атрибут нужно добавить именно на группу, т.е. элемент Input Group. Если добавить его на само поле ввода Input, то поиск работать не будет.

Название:

data-filter-settings

Значение — сформируйте атрибут вида:

{ "fieldId": "ID поля", "filter": "тип фильтра", "actionType": "тип действия" }

Параметры атрибута:

ID поля, по которому вы будете искать (fieldId)

Как найти ID поля:

Откройте Коллекцию, которую нужно фильтровать (на вкладке Коллекции) → найдите Поле, по которому будете фильтровать → меню «три точки» → Копировать ID поля

Тип фильтра (filter)

FILTER_CONTAINS — содержит

FILTER_EQUAL — равно (если нужно полное совпадение)

FILTER_COLLECTION_TEXT — поиск по текстовым полям (Text, Rich Text)

Тип действия (actionType)

change — поиск по изменению (происходит сразу при вводе текста в поле)

submit — поиск по нажатию кнопки

Все названия и значения параметров атрибута должны быть в кавычках. Между значением и кавычками не должно быть пробелов. Например, "actionType": "change"

ПРИМЕР ПОИСКА: товары по названию

Настройка поиска реализуется с помощью текстового поля ввода Input.

Атрибут отслеживает ввод в поле поиска и проверяет, содержится ли введенный текст в поле коллекции с ID="title" («Название»). Поиск происходит сразу при вводе текста, без нажатия на кнопку.

data-filter-settings: 
{ "fieldId": "title", "filter": "FILTER_CONTAINS", "actionType": "change" }

Готово! Как только пользователь начинает вводить текст, элементы коллекции автоматически обновляются, и на странице остаются только те товары, в названии которых есть этот текст.

📊 Фильтрация

Каждому элементу фильтра в форме (Select Group, Checkbox Group, Radio Group) добавьте пользовательский атрибут.

Важно: Атрибут нужно добавить именно на группу, т.е. элемент Select Group, Checkbox Group, Radio Group. Если добавить его на List или Item, то фильтрация работать не будет.

Название:

data-filter-settings

Значение — сформируйте атрибут вида:

{ "fieldId": "ID поля", "filter": "тип фильтра", "actionType": "тип действия", "values": [значения] }

Параметры для атрибута:

ID поля, по которому вы будете фильтровать (fieldId)

Как найти ID поля:

Тип фильтра (filter)

Для каждого типа элемента доступен свой набор фильтров.

Например, если вы фильтруете по текстовому полю, то можно выбрать, содержит ли оно определенный текст, а если по числу — сравнить его с другим числом.

Для текста

FILTER_CONTAINS — содержит

FILTER_NOT_CONTAINS — не содержит

FILTER_EQUAL — равно

FILTER_NOT_EQUAL — не равно

FILTER_IS_SET — установлено

FILTER_IS_NOT_SET — не установлено

Для даты

FILTER_DATE_AFTER — дата после

FILTER_DATE_BEFORE — дата до

FILTER_EQUAL — равно

FILTER_NOT_EQUAL — не равно

FILTER_IS_SET — установлено

FILTER_IS_NOT_SET — не установлено

Для поля типа Reference

FILTER_ONE_IS_IN — включено в

FILTER_ONE_IS_NOT_IN — не включено в

FILTER_EQUAL — равно

FILTER_NOT_EQUAL — не равно

FILTER_IS_SET — установлено

FILTER_IS_NOT_SET — не установлено

Для поля типа Multi Reference

FILTER_HAS_ANY_OF — содержит любые из

FILTER_HAS_NOT_ANY_OF — не содержит ни одного из

FILTER_ALL_ARE_IN — содержится в

FILTER_ALL_ARE_NOT_IN — не содержится в

FILTER_HAS_ONE — содержит один из

FILTER_HAS_NOT_ONE — не содержит один из

FILTER_HAS_ALL — содержит всё из

FILTER_HAS_NOT_ALL — не содержит всё из

FILTER_EQUAL — равно

FILTER_NOT_EQUAL — не равно

FILTER_IS_SET — установлено

FILTER_IS_NOT_SET — не установлено

Для числа

FILTER_EQUAL — равно

FILTER_NOT_EQUAL — не равно

FILTER_GREATER — больше

FILTER_LESS — меньше

FILTER_IS_SET — установлено

FILTER_IS_NOT_SET — не установлено

Для Rich Text

FILTER_IS_SET — установлено

FILTER_IS_NOT_SET — не установлено

FILTER_COLLECTION_TEXT — содержит текст

Для изображения

FILTER_IS_SET — установлено

FILTER_IS_NOT_SET — не установлено

Для переключателя (Истина/Ложь)

FILTER_IS_ON — поле включено

FILTER_IS_OFF — поле выключено

Тип действия (actionType)

change — фильтрация по изменению в форме

submit — фильтрация по нажатию кнопки

Значения для фильтра (values)

Список значений должен содержать ID элементов коллекции (через запятую), из которой нужно взять данные для поля фильтра.

Пустая строка "" — отсутствие фильтра (покажет все элементы)

Остальные значения соответствуют вариантам выбора (Select, Radio, Checkbox)

Например, если вы фильтруете товары по типу продукта, то значения — это список ID элементов коллекции «Тип продукта».

Как найти ID элемента коллекции:

Откройте Коллекцию с элементами для фильтра (на вкладке Коллекции) → Откройте элемент коллекции → Найдите ID элемента (последний параметр) → Скопируйте ID

Порядок значений в values должен соответствовать порядку элементов в списке Radio, Select и Checkbox, который задан в настройках на правой панели (а не порядку элементов в коллекции).

Важно: Каждое значение ID элементов должно быть в кавычках, без пробелов между кавычками и значением. Например: "values": [ "10939113", "10939313", "10939513" ]

Если добавить несколько атрибутов с одинаковым названием, то последний перезаписывает предыдущий.

ПРИМЕР ФИЛЬТРАЦИИ: товары по типу (множественный выбор)

Такая фильтрация делается с помощью поля Checkbox, которое содержит список типов товаров. Пользователь может выбрать один или несколько вариантов, а список товаров на странице обновляется автоматически.

В примере атрибут фильтрует коллекцию «Продукты» по полю с ID=da89b6 («Тип»):

тип фильтра: «Включено в»

фильтрация: «по изменению»

значения: список ID элементов коллекции «Тип продукта»

data-filter-settings: 
{ "fieldId": "da89b6", "filter": "FILTER_ONE_IS_IN", "actionType": "change", "values": [ "10939113", "10939313", "10939513", "10939713", "10939913", "10940313" ] }

Готово! Пользователь выбирает один или несколько типов продукта в поле фильтра — на страницу выводятся продукты этих типов. Фильтрация будет осуществляться при каждом изменении в поле фильтра.

ПРИМЕР ФИЛЬТРАЦИИ: товары с меткой «Хит»

Такую фильтрацию можно реализовать с помощью поля коллекции типа Переключатель (Истина/Ложь) и поля формы Checkbox с элементом «Хит». Нужно отфильтровать товары, у которых переключатель у поля «Хит» в коллекции включен.

В примере атрибут фильтрует коллекцию «Продукты» по полю с ID=fdb83b («Хит»):

тип фильтра: «Включен»

фильтрация: «по изменению»

значения: «1» (переключатель включен: значение переменной типа boolean 1 — истина, 0 — ложь)

data-filter-settings:
{ "fieldId": "fdb83b", "filter": "FILTER_IS_ON", "actionType": "change", "values": [ "1" ] }

Готово! При нажатии на кнопку «Хит» на страницу выводятся только товары с этой меткой.

↕️ Сортировка

Каждому элементу сортировки в форме (Select Group, Radio Group) добавьте пользовательский атрибут:

Название:

data-sort-settings

Значение — сформируйте атрибут вида:

{ "values": [значения], "actionType": "тип действия" }

Параметры для атрибута:

Значения для сортировки (values)

Список значений должен содержать ID поля коллекции, по которому вы будете сортировать (например, «Цена» для статей).

Как найти ID элемента коллекции:

Откройте Коллекцию, которую нужно сортировать (на вкладке Коллекции) → найдите Поле, по которому будете сортировать → меню «три точки» → Копировать ID поля

Формат параметра values:

Пустая строка "" — отсутствие сортировки

"^ID" — сортировка от большего значения к меньшему

"ID" — сортировка от меньшего значения к большему

Если нужно дать пользователю выбор из двух вариантов сортировки по одному и тому же полю, добавьте ID поля в список values два раза:

с префиксом ^ — для сортировки по убыванию

без префикса — для сортировки по возрастанию

Например, "values": ["^bf8979", "bf8979"]

В одном атрибуте можно настроить сортировку по нескольким полям — например, по цене и по дате.

Пример значений:

1 вариант — без сортировки

2 вариант — по ID1 от большего к меньшему

3 вариант — по ID1 от меньшего к большему

4 вариант — по ID2 от большего к меньшему

5 вариант — по ID2 от меньшего к большему

"values": [ "", "^ID1", "ID1", "^ID2", "ID2" ]

Тип действия (actionType)

change — сортировка по изменению в форме

submit — сортировка по нажатию кнопки

ПРИМЕР СОРТИРОВКИ: товары по цене и по дате выпуска

Для сортировки используется поле Select, которое содержит варианты сортировки по цене товара и по дате выпуска.

Атрибут работает для сортировки коллекции по полю с ID=a38d18 («Цена»): «От дорогого» и «От дешевого», а также по полю с ID=f08836 («Дата выпуска»): «К новому» и «К старому». Сортировка будет осуществляться при каждом изменении в списке выбора.

data-sort-settings: 
{ "values": [  "", "^a38d18", "a38d18", "^f08836", "f08836" ], "actionType": "change" }

Готово! Товары сортируются по цене и по дате выпуска.

Шаг 4. Настройте анимацию (опционально)

По умолчанию при фильтрации и сортировке включена анимация — коллекция плавно обновляется.

💡 Как отключить анимацию

Чтобы отключить это, добавьте виджету Collection пользовательский атрибут:

Название:

data-loading-overlay

Значение:

disabled

Шаг 5. Опубликуйте проект

Сохраните изменения и опубликуйте проект. После публикации фильтрация и сортировка начнут работать автоматически.

Частые ошибки и как их исправить

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

Ничего не происходит при клике на фильтры

Если при взаимодействии с элементами формы коллекция не обновляется и не появляется даже краткого «моргания»:

Проверьте, что форма и коллекция связаны одним и тем же пользовательским атрибутом (ID формы должен совпадать).

Убедитесь, что атрибут связи добавлен именно на виджет Form и виджет Collection, а не на вложенные элементы.

Проверьте, что сайт опубликован — фильтрация не работает в режиме предпросмотра.

Коллекция обновляется, но выдача пустая

Если при клике на фильтр элементы исчезают:

Проверьте тип фильтра (FILTER_CONTAINS, FILTER_EQUAL и т. д.) — он должен соответствовать типу поля коллекции.

Убедитесь, что значения фильтра совпадают с данными в коллекции (без лишних пробелов, с учетом регистра и формата).

Для Checkbox, Radio и Select проверьте, что в values указаны ID элементов, а не текстовые значения.

Фильтр не срабатывает при вводе текста

Если поиск не реагирует на ввод:

Проверьте actionType. Для поиска по мере ввода должно быть указано Change, а не Submit.

Убедитесь, что атрибут фильтра добавлен к самому полю ввода, а не к группе или контейнеру.

Сортировка работает некорректно

Если элементы сортируются не так, как ожидается:

Проверьте, что в values указаны корректные ID полей коллекции

Убедитесь, что для сортировки используется атрибут сортировки, а не фильтрации.

Проверьте порядок значений: ^fieldId — по убыванию, fieldId — по возрастанию.

Один фильтр работает, другой — нет

Если часть элементов формы работает корректно, а часть — нет:

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

Убедитесь, что выбранная коллекция и поле совпадают с теми, которые вы хотите фильтровать.