Свойство «Бренд» с тремя сотнями производителей. «Совместимость» с тысячей моделей. «Диаметр» с полусотней значений. Открываешь такой фильтр — и получаешь вертикальную «простыню» чекбоксов, которую невозможно просмотреть глазами. Пользователь скроллит, не находит своё, закрывает панель и уходит. А ведь фильтр — это то место, где посетитель формулирует спрос и почти готов купить.
Эта статья — о том, как спроектировать умный фильтр по характеристикам, у которых десятки и сотни значений, на 1С-Битрикс. Разберём паттерны показа длинного фасета, поиск внутри блока, группировку значений, работу счётчиков и, главное, производительность через фасетный индекс. Если каталог большой и «тяжёлый», начать стоит с аудита и оптимизации 1С, где мы смотрим и структуру данных, и скорость витрины.
Коротко
- Длинный список значений (от 15–20) нельзя показывать простым списком — нужны поиск внутри фасета, свёртка и группировка.
- Сворачивайте фасет до 8–10 популярных значений с кнопкой «показать ещё» и полем поиска сверху.
- Группируйте: числа — в диапазоны и слайдеры, бренды — по алфавиту, совместимость — в категории-зонтики.
- Скорость пересчёта держит фасетный индекс умного фильтра — без него каждый клик по чекбоксу тормозит.
Когда список значений становится проблемой
Обычный фильтр из чекбоксов работает, пока значений у свойства немного. Цвет — десяток вариантов, размер обуви — два десятка, тип разъёма — пять. Такой список пользователь охватывает взглядом за секунду. Проблема начинается, когда у свойства не 10, а 50, 200 или больше значений: бренды в большом каталоге электроники, коды совместимости в автозапчастях, типоразмеры в крепеже.
Практический порог, за которым простой список перестаёт работать, — примерно 15–20 значений. До него достаточно аккуратной вёрстки. После — фасету нужна отдельная механика: иначе он превращается в барьер вместо инструмента. Важно, что «много значений» — это свойство конкретного справочника, а не всего каталога: в одном фильтре могут соседствовать короткий фасет «Цвет» и гигантский «Бренд», и обращаться с ними надо по-разному.
Почему длинная «простыня» убивает конверсию
Длинный неструктурированный список бьёт по конверсии сразу с нескольких сторон. Во-первых, когнитивная нагрузка: человек не может оценить сотню вариантов и впадает в «паралич выбора». Во-вторых, физический скролл: нужное значение может быть в самом низу, и до него надо докрутить. В-третьих, на мобильных «простыня» вытесняет саму выдачу товаров за пределы экрана.
Отдельная беда — производительность. Каждый выбор в умном фильтре пересчитывает, какие значения ещё дают товары, и обновляет счётчики. Если под этим нет фасетного индекса, длинные списки делают каждый клик медленным, и пользователь ощущает «залипание» интерфейса. Медленный фильтр воспринимается как сломанный, даже если формально он работает.
Паттерны показа длинного фасета
Есть устоявшийся набор приёмов, которыми «укрощают» длинный список значений. В сильном фильтре они комбинируются, а не выбираются по одному.
- Свёртка. Показывать 8–10 значений, остальное — под кнопкой «Показать ещё (N)».
- Поиск внутри фасета. Поле над списком, фильтрующее значения по мере ввода.
- Приоритет популярных. Наверх — значения с наибольшим числом товаров или спросом.
- Группировка. Диапазоны для чисел, алфавит для брендов, категории для совместимости.
- Скрытие пустого. Значения без товаров в текущей выборке не показываются.
Выбор комбинации зависит от природы свойства. Для брендов идеальны поиск плюс алфавит; для числовых характеристик — диапазоны и слайдер; для справочников совместимости — категории-зонтики плюс поиск. Универсального «одного правильного» решения нет, но универсальна логика: сократить видимое, дать быстрый путь к нужному, убрать лишнее.
Поиск внутри фасета
Поиск внутри блока — самый мощный инструмент для списков в сотни значений. Пользователь, который знает нужный бренд или размер, не должен скроллить: он вводит несколько символов и сразу видит совпадения. Это превращает нечитаемый список в мгновенно доступный справочник.
Чтобы такой поиск был полезен, важны детали:
- Поиск по подстроке, а не только по началу. «сони» должно находить «Sony», ввод в середине слова тоже должен работать.
- Устойчивость к регистру и раскладке. Учитывайте латиницу и кириллицу для брендов.
- Подсветка совпадения. Найденная часть выделяется, чтобы взгляд цеплялся за неё.
- Сохранение выбранного. Уже отмеченные значения не пропадают при фильтрации списка.
Поиск внутри фасета уместно включать автоматически, когда значений больше порога (скажем, 15). Для коротких списков поле поиска — лишний элемент, который только загромождает интерфейс.
Свёртка и приоритет популярных значений
Свёртка — это компромисс между полнотой и читаемостью. Вместо всех значений сразу показывается верхушка списка, а остальное прячется под кнопкой раскрытия. Ключевой вопрос — что попадёт в эту верхушку: если наверху окажутся случайные или редкие значения, свёртка навредит.
Поэтому свёртку связывают с приоритезацией. Наверх выносят значения, которые чаще всего выбирают или у которых больше товаров: популярные бренды, ходовые размеры. Данные о популярности можно брать из статистики выбора в фильтре и из спроса — тем самым фильтр подстраивается под реальное поведение покупателей. О том, как выявлять реальный спрос из поведения посетителей, полезно почитать смежные материалы по аналитике, а базовую механику пересчёта обеспечивает фасетный индекс, о котором ниже.
Группировка: диапазоны, алфавит, зонтики
Самый радикальный способ укоротить список — не показывать значения по одному, а объединить их. Группировка снижает число видимых элементов на порядок и делается по-разному в зависимости от типа данных.
| Тип свойства | Проблема | Способ группировки |
|---|---|---|
| Числовое (цена, вес, диаметр) | Десятки точных значений | Слайдер диапазона + пресеты «до N», «N–M» |
| Бренд/производитель | Сотни названий | Поиск + алфавитные группы, топ-бренды сверху |
| Совместимость/модель | Тысячи кодов | Категории-зонтики (серия, поколение) + поиск |
| Цвет/материал | Много близких оттенков | Группы базовых цветов с подпунктами |
Группировку нельзя добавить «сверху» в последний момент — она опирается на структуру данных. Числовые характеристики должны храниться числами (а не строками «10 мм»), у брендов должен быть управляемый справочник, а совместимость — иметь иерархию. Всё это закладывается в свойства инфоблоков и справочники при проектировании каталога, поэтому продумывать группировку нужно вместе со структурой данных, а не после запуска.
Счётчики и пустые значения
Счётчики у значений («Sony (42)») помогают пользователю выбирать осознанно и не попадать в пустую выдачу. Но на длинных списках их поддержание стоит ресурсов, а сам вид сотен счётчиков перегружает. Здесь нужен баланс.
- Показывайте счётчики там, где они помогают решению — на ключевых свойствах и популярных значениях.
- Скрывайте заведомо пустые значения в длинных списках: они только удлиняют «простыню».
- Для коротких понятных свойств (цвет, размер) неактивные, но видимые значения помогают понять ассортимент.
- Не пересчитывайте всё на каждый символ — тяжёлые счётчики обновляйте после применения выбора.
Правило простое: чем длиннее список, тем агрессивнее убирайте пустое и тем осторожнее со счётчиками, которые нагружают пересчёт. Чем короче и понятнее свойство — тем больше можно себе позволить.
Фасетный индекс и производительность
Всё юзабилити рухнет, если фильтр тормозит. За скорость умного фильтра в 1С-Битрикс отвечает фасетный индекс — предрассчитанная структура, которая позволяет быстро определять, какие значения ещё дают товары, без тяжёлых запросов к каталогу на каждый клик.
Что важно про фасетный индекс на большом каталоге:
- Он должен быть включён. Без индекса каждый выбор в фильтре — это тяжёлые выборки по всему каталогу.
- Его нужно пересчитывать. После обмена с 1С и массовых изменений товаров индекс обновляют, иначе счётчики и доступность значений «врут».
- Он растёт с числом свойств. Много свойств с сотнями значений — большой индекс; за его размером и временем пересчёта следят.
- Он работает в связке с кэшем. Компонент умного фильтра кэшируется, а тяжёлый пересчёт индекса выносят в фоновые агенты.
Пересчёт индекса и обмен с 1С удобно ставить в расписание, чтобы данные обновлялись без ручных действий. Настройку таких фоновых процессов и регламентов мы закрываем услугой автоматизации на 1С. На стороне инфраструктуры на скорость влияет и окружение — про это подробно в статье о хостинге и инфраструктуре BitrixVM.
Умный фильтр в 1С-Битрикс: настройка
Собрать фильтр под большие списки в 1С-Битрикс — это последовательность понятных шагов. Названия пунктов зависят от редакции, но логика такая:
- Наведите порядок в свойствах. Числа храните числами, бренды — справочником, совместимость — с иерархией. От этого зависит, можно ли будет группировать.
- Отметьте свойства для умного фильтра. В настройках инфоблока укажите, какие свойства участвуют в фильтре и как отображаются.
- Включите фасетный индекс. Постройте его и настройте пересчёт после обмена и массовых правок.
- Настройте компонент catalog.smart.filter. Задайте свёртку, поиск внутри фасета, скрытие пустых значений и приоритет популярных.
- Проверьте кэширование. Убедитесь, что фильтр кэшируется, а тяжёлый пересчёт вынесен в агенты.
- Протестируйте на боевых данных. Прогоните реальные свойства с сотнями значений, замерьте отклик на клик и корректность счётчиков.
Если каталог формируется обменом из учётной системы, качество данных для фильтра держится на качестве обмена: единые справочники брендов, корректные числовые значения, стабильные коды совместимости. Наладить это помогает автоматизация продаж и склада на 1С, где данные приводятся к порядку ещё в учётной системе.
Мобильный фильтр и большие списки
На мобильных проблема длинных списков острее всего: экран мал, а «простыня» вытесняет товары. Поэтому мобильный фильтр проектируют отдельно, а не просто «сжимают» десктопный.
- Фильтр — в отдельной панели или экране, который открывается кнопкой и не мешает просмотру выдачи.
- Каждый длинный фасет свёрнут по умолчанию; раскрытие — по тапу.
- Поиск внутри фасета обязателен — скролл сотен значений пальцем невыносим.
- Применение — по кнопке. Пользователь набирает условия, а выдача пересчитывается один раз, а не после каждого касания.
- Счётчик выбранного и сброс всегда на виду, чтобы не потеряться в условиях.
Отдельное применение по кнопке на мобильных — это ещё и экономия запросов: вместо десятка пересчётов сервер отрабатывает один. На больших каталогах это заметно снижает нагрузку.
Частые ошибки
- Показывают все значения списком. Сотни чекбоксов без свёртки и поиска — гарантированный барьер.
- Нет поиска внутри фасета. Пользователь вынужден скроллить длинный список вручную.
- Фасетный индекс выключен. Каждый клик по чекбоксу выполняет тяжёлые запросы, фильтр «залипает».
- Индекс не пересчитывается. После обмена счётчики и доступность значений расходятся с реальностью.
- Числа хранятся строками. «10 мм» вместо числа ломает диапазоны и слайдеры.
- Пустые значения не скрыты. Список удлиняется вариантами, ведущими в никуда.
- Мгновенное применение на мобильных. Пересчёт после каждого касания раздражает и грузит сервер.
- Случайный порядок значений. Наверху редкие варианты, популярные спрятаны под свёрткой.
Чек-лист внедрения
- Свойства структурированы. Числа — числами, бренды — справочником, совместимость — иерархией.
- Свёртка настроена. Длинные фасеты показывают 8–10 значений с кнопкой «показать ещё».
- Поиск внутри фасета включён для свойств с большим числом значений.
- Группировка применена. Диапазоны для чисел, алфавит для брендов, зонтики для совместимости.
- Пустое скрыто, счётчики оставлены там, где помогают решению.
- Фасетный индекс построен и пересчитывается после обмена и массовых правок.
- Кэш и агенты настроены, тяжёлый пересчёт вынесен в фон.
- Мобильный фильтр отдельный, применение по кнопке, поиск в фасетах обязателен.
- Протестировано на боевых данных — отклик на клик и корректность счётчиков.
Вывод
Фильтр по характеристикам с сотнями значений — это две задачи в одной. Юзабилити требует сократить видимый список: свёртка, поиск внутри фасета, группировка в диапазоны и категории, приоритет популярных значений. Производительность требует фасетного индекса, который пересчитывает доступные варианты мгновенно, и кэша, который не даёт фильтру «залипать» на каждый клик.
Решать эти задачи нужно вместе и начинать со структуры данных: пока бренды не в справочнике, а числа хранятся строками, никакая механика показа не спасёт. Наведите порядок в свойствах, включите и регулярно пересчитывайте фасетный индекс, добавьте поиск и группировку — и большой фильтр из барьера превратится в самый сильный инструмент подбора в вашем каталоге.
