Документация Сотбит: Розница. Настройка каталога. Умный фильтр. Отображение фильтра
Умный фильтр – это инструмент для отбора элементов каталога по заданным критериям, обладающий следующими особенностями:
-
Анализируя все элементы раздела, он выстраивает на основании значений их свойств и цен единообразное представление;
-
Поддерживает торговые предложения;
-
Умеет показывать то количество элементов, которые будут выбраны при применении фильтра;
-
Умеет показывать пользователю, что некоторые комбинации значений не встречаются в каталоге.
Для настройки отображения фильтра на страницах каталога перейдите в Администрирование > Сотбит > Сотбит: Розница > Настройки > [id сайта], а затем на вкладку Каталог.
В решении предоставлено два варианта отображения Умного фильтра на страницах каталога:
1. По кнопке
2. Слева
В зависимости от выбора меняется расположение отображения фильтра, но функционал остается неизменным.
Параметр Показывать фильтр:
По кнопке:
Данный вариант скрывает фильтр по умолчанию, после нажатия на соответствующую кнопку фильтр раскрывается по верх страницы каталога.
Слева:
При выборе варианта Слева, фильтр будет всегда отображаться в левой части на странице каталога.
Облако тегов фильтра
Облако тегов отображает выбранные покупателем параметры фильтрации в виде интерактивных плашек над Списком товаров. Это позволяет визуально контролировать текущие условия отбора и быстро корректировать или сбрасывать их без возврата к основному блоку фильтра.
В решении предусмотрено два варианта отображения активных тегов:
- С группировкой в выпадающие теги (при включенной опции Группировать активные фильтры в выпадающие теги) — значения объединяются по свойствам в компактные теги с выпадающими списками.
- Без группировки (при отключенной опции) — каждое выбранное значение выводится отдельным самостоятельным тегом.
Если опция не отмечена — для каждого выбранного значения выводится отдельный независимый тег.
Настройка параметров облака тегов в компоненте
Управление режимом работы облака тегов выполняется в параметрах комплексного компонента каталога.
Чтобы перейти к настройкам:
-
В публичной части сайта включите Режим правки.
-
Наведите курсор на область каталога и нажмите на значок шестеренки во всплывающем меню.
-
В открывшемся окне перейдите в раздел Настройки фильтра (1).
|
Поле
|
Описание
| ||||||||||||||||||||||||||||||||||||||||
|
Настройки отображения активных фильтров
| |||||||||||||||||||||||||||||||||||||||||
|
Использовать облако тегов фильтра
|
Активирует отображение панели активных фильтров над списком товаров.
| ||||||||||||||||||||||||||||||||||||||||
|
Группировать активные фильтры в выпадающие теги
|
Включает компактный режим группировки:
• Если опция отмечена — несколько выбранных значений одного свойства объединяются в один тег с выпадающим списком.
• Если опция не отмечена — каждое выбранное значение выводится отдельным статическим тегом (без группировки).
| ||||||||||||||||||||||||||||||||||||||||
|
Максимальное количество видимых тегов
|
Лимит отображаемых тегов в строке на десктопных экранах. Если количество активных свойств превышает это число, остальные скрываются под кнопку Ещё [N]. Если поле не заполнено, отображаются все теги без скрытия.
| ||||||||||||||||||||||||||||||||||||||||
|
Поднимать выбранные значения вверх
|
При включенной группировке выбранные значения внутри выпадающего списка тега автоматически перемещаются наверх и отделяются разделительной линией.
| ||||||||||||||||||||||||||||||||||||||||
|
Порог включения поиска в теге
|
Минимальное количество значений свойства (по умолчанию 10), при котором в верхней части выпадающего меню тега появляется строка быстрого поиска.
| ||||||||||||||||||||||||||||||||||||||||
С группировкой в выпадающие теги (десктопная версия)
На экранах с разрешением от 1025px тег активного свойства отображается в виде составной split-кнопки:
- Основная область тега: содержит название свойства, выбранные значения и стрелку выпадающего списка (▾).
- При выборе одного значения выводится: Свойство: Значение ▾ (например, Производитель: Nordica Frost ▾).
- При выборе двух и более значений выводится: Свойство [Количество] ▾ (например, Цвет 2 ▾).
- Кнопка Сбросить все: располагается в начале строки перед списком тегов. Нажатие на нее полностью очищает все выбранные покупателем фильтры во всех свойствах и возвращает выдачу каталога к исходному виду.
- Зона быстрого сброса: иконка крестика (×), отделенная вертикальной чертой. Клик по крестику мгновенно сбрасывает все выбранные значения только этого свойства.
- Механика выпадающего меню: список значений открывается по клику или при наведении курсора на тег. Меню закрывается при уводе курсора, клике вне области или по нажатию клавиши Esc. Всплывающая подсказка с полным наименованием свойства отображается сверху над тегом, не перекрывая меню.
- Сворачивание тегов: если активных свойств больше, чем задано в поле Максимальное количество видимых тегов, в конце строки выводится кнопка Ещё [N], которая по клику разворачивает всю панель и меняется на Свернуть.
Мобильная и планшетная версия
На мобильных устройствах и планшетах интерфейс адаптирован для управления пальцем:
Выбор значений внутри тега фильтра:
- Цельный тег: тег представляет собой единую кнопку без деления на зоны сброса. Нажатие на любую его область открывает модальную шторку (Bottom Sheet) снизу экрана.
- Фиксированная кнопка «Сбросить все»: в левой части строки всегда закреплена круглая кнопка с иконкой круговой стрелки (`↺`). Она зафиксирована на экране (sticky) и не уходит в скролл при горизонтальной прокрутке ленты тегов. Позволяет в один тап сбросить сразу все выбранные фильтры в каталоге.
- Горизонтальный скролл: строка тегов прокручивается свайпом, а с правой стороны отображается плавный градиент для индикации наличия скрытых тегов.
- Шторка со значениями: выезжает снизу, занимает до 80% высоты экрана с затемнением фона и позволяет отметить нужные чекбоксы, радиокнопки и прочие значения.
Работа со значениями внутри выпадающего списка тега
В раскрытом окне тега действуют следующие правила:
1. Поиск по списку: если количество вариантов превышает порог, заданный параметром Порог включения поиска в теге, в начале списка отображается поле Поиск для мгновенной фильтрации вариантов.
2. Сортировка выбранных: при включенном параметре Поднимать выбранные значения вверх отмеченные элементы группируются вверху списка и отделяются разделителем от остальных вариантов.
3. Недоступные варианты: значения, для которых нет товаров в наличии при текущей комбинации других фильтров, отображаются серым цветом и становятся неактивными для выбора.
Режимы фильтрации и сброс значений внутри окна:
-
В режиме AJAX: выбор любого чекбокса сразу отправляет фоновый запрос и обновляет список товаров без закрытия окна. В нижней части списка доступна кнопка Сбросить свойство — клик по ней мгновенно снимает все галочки только в текущем свойстве и обновляет выдачу. Если в свойстве не осталось ни одного выбранного значения, тег автоматически закрывается и исчезает из строки активных фильтров.
-
При отключенной фильтрации через AJAX: внизу окна закреплена панель управления:
-
Кнопка Показать ([Количество] товаров) (5) — применяет отмеченные параметры, закрывает окно и перезагружает страницу каталога.
-
Иконка сброса (↺) рядом с кнопкой — очищает все выставленные галочки пределах всего фильтра.
Отображение тегов без группировки
Если параметр Группировать активные фильтры в выпадающие теги отключен, для каждого выбранного значения формируется отдельный статический тег с иконкой сброса. Клик по крестику на теге сразу удаляет соответствующее значение из фильтра.
