Больше половины трафика магазина сегодня приходит с телефонов, но каталог часто проектируют «с десктопа»: широкая колонка фильтров слева, длинный список свойств, мелкие чекбоксы. На большом экране это работает, а на маленьком превращается в кашу, по которой невозможно попасть пальцем. Итог — человек не может отфильтровать товар, не находит нужное и уходит.
Разберём, как спроектировать фильтр и поиск для мобильного каталога на 1С-Битрикс так, чтобы всё уместилось и работало быстро. Поговорим про умный фильтр catalog.smart.filter и фасетный индекс, про шторку фильтров, тач-зоны, скорость и удобный ввод. Если каталог большой и мобильная фильтрация тормозит, поможет аудит и оптимизация 1С — но сначала пройдёмся по принципам.
Коротко
- На узком экране фильтр выносят в выезжающую шторку или полноэкранный слой по кнопке «Фильтры» со счётчиком выбранного.
- Умный фильтр 1С-Битрикс держится на фасетном индексе — без него фильтрация на большом каталоге медленная.
- Показывайте 3–5 главных фильтров сразу, остальные сворачивайте; считайте результаты на лету, применяйте по кнопке.
- Скорость решают фасетный индекс, кэш компонентов, композитный сайт и подгрузка товаров порциями.
Почему мобильный каталог — это отдельная задача
Мобильный пользователь ограничен тремя вещами: размером экрана, толщиной пальца и скоростью сети. Каждая из них ломает привычный десктопный каталог. Широкая колонка фильтров не помещается. Мелкие чекбоксы не нажимаются. Тяжёлый список товаров грузится долго на мобильной сети. Поэтому мобильный каталог — не «сжатая версия десктопа», а самостоятельная задача проектирования.
Хорошая новость: 1С-Битрикс из коробки даёт адаптивные компоненты каталога и умный фильтр, а стандартные решения (например, «Аспро» и типовые интернет-магазины) уже содержат мобильную подачу фильтра. Плохая: на реальном каталоге с сотнями свойств и десятками тысяч товаров эту подачу почти всегда приходится дорабатывать под конкретные категории и следить за скоростью.
Умный фильтр и фасетный индекс в 1С-Битрикс
Основа фильтрации в 1С-Битрикс — компонент catalog.smart.filter, «умный фильтр». Его ключевая механика — фасетный индекс: заранее просчитанная таблица связей «свойство — значение — товары». Благодаря ему фильтр мгновенно показывает количество товаров по выбранным параметрам и гасит варианты, которые ничего не дадут.
Что важно про фасетный индекс на практике:
- Его нужно включить и перестроить. Без активного фасетного индекса умный фильтр считает результаты «в лоб» и тормозит на большом каталоге.
- Он обновляется при изменении товаров. После крупных обменов с 1С индекс достраивается; следите, чтобы это не превращалось в узкое место, — здесь помогает грамотно настроенная автоматизация продаж и склада на 1С.
- Он экономит мобильную сеть. Быстрый пересчёт количества результатов на сервере избавляет от лишних тяжёлых запросов с телефона.
Куда девать фильтр на узком экране
Боковая колонка фильтров на телефоне не работает: либо она съедает пол-экрана, либо товары становятся нечитаемыми. Стандартное и проверенное решение — вынести фильтр в отдельный слой, который вызывается по кнопке.
- Кнопка «Фильтры» на виду. Обычно закреплена сверху или снизу списка, всегда доступна при прокрутке.
- Счётчик выбранного. На кнопке — число применённых параметров, чтобы человек помнил, что фильтр включён.
- Выезжающая шторка или полный экран. Фильтр открывается поверх каталога, товары не сжимаются.
- Явное закрытие и сброс. Кнопки «Применить» и «Сбросить» всегда на виду, не прячутся под клавиатурой.
Для распространённых категорий (одежда, стройматериалы, электроника) полезно закреплять пару самых важных фильтров прямо над списком — например, размер или бренд, — а остальное прятать в шторку. Так частый сценарий закрывается в один тап.
Сколько фильтров показывать и в каком порядке
Главная ошибка — вывалить на маленький экран все свойства инфоблока подряд. Человеку не нужны 40 характеристик; ему нужны 3–5, которые реально сужают выбор в этой категории. В 1С-Битрикс состав и порядок фильтра настраиваются на уровне свойств инфоблока, поэтому его можно и нужно делать разным для разных разделов.
- Определите ключевые свойства категории. Для обуви это размер и бренд, для краски — объём и цвет, для инструмента — тип и мощность.
- Вынесите их наверх. Первые 3–5 фильтров — самые востребованные, они видны сразу.
- Сверните второстепенные. Остальные свойства прячьте в раскрывающиеся секции.
- Уберите бесполезное. Свойства, по которым почти не фильтруют, вообще не показывайте в мобильном фильтре.
Применять фильтр сразу или по кнопке
Спорный вопрос мобильной фильтрации — момент применения. Автоматически перерисовывать каталог после каждого тапа кажется удобным, но на мобильной сети это перегружает список и раздражает: человек ещё выбирает, а страница уже дёргается.
Оптимальный компромисс — считать результаты на лету, применять по кнопке. Пользователь отмечает параметры, видит на кнопке «Показать 42 товара» (число обновляется мгновенно благодаря фасетному индексу), а окончательно каталог перерисовывается по явному тапу. Так он получает и обратную связь о количестве, и контроль над моментом загрузки.
Мобильный поиск: поле, подсказки, ввод
Поиск на телефоне часто быстрее фильтра: человеку проще напечатать «дрель 18в», чем продираться сквозь свойства. Поэтому поле поиска должно быть крупным, доступным с любой страницы каталога и удобным для ввода одной рукой.
- Заметное поле. Поиск не прячут в бургер-меню на страницах каталога — он на виду.
- Автодополнение. По мере ввода — подсказки товаров, категорий и брендов, чтобы допечатывать меньше.
- Недавние и популярные запросы. Быстрый повтор поиска и подсказка направлений.
- Правильная клавиатура и очистка. Кнопка очистки поля, корректный тип ввода, быстрый доступ к отправке.
Поиск в 1С-Битрикс работает на индексе, и на мобильном критична скорость подсказок: если ответ приходит с задержкой, пользователь допечатает запрос раньше и подсказки станут бесполезны. Здесь помогают кэширование частых запросов и быстрый бэкенд. Про то, как строить быстрые серверные обработчики и API на современном ядре, мы писали в статье про D7 и ORM в 1С-Битрикс.
Скорость: фасет, кэш, композит
На мобильной сети скорость — не приятный бонус, а условие работоспособности. Медленный фильтр воспринимается как сломанный. Держать каталог быстрым помогает связка нескольких механизмов Битрикса.
| Механизм | Что даёт на мобильном |
|---|---|
| Фасетный индекс | Мгновенный пересчёт количества результатов без тяжёлых запросов |
| Кэш компонентов каталога | Списки и фильтр отдаются из кэша, а не собираются заново |
| Композитный сайт | Статическая часть страницы показывается сразу, динамика догружается |
| Подгрузка порциями | Грузится первая порция товаров, остальное — по прокрутке |
| Оптимизация изображений | Лёгкие превью экономят мобильный трафик и ускоряют список |
Скорость каталога упирается ещё и в инфраструктуру: под нагрузкой сервер не должен захлёбываться на запросах фильтра. Базовые вещи по настройке окружения мы разбирали в материале про хостинг и инфраструктуру для 1С-Битрикс на BitrixVM.
Прокрутка, подгрузка и возврат в список
Классическая пагинация с мелкими номерами страниц на телефоне неудобна. Обычно её заменяют кнопкой «Показать ещё» или бесконечной прокруткой небольшими порциями — так пользователь не ждёт загрузки всей категории.
Но у бесконечной прокрутки есть коварная проблема: человек долго листал, зашёл в карточку товара, вернулся — и оказался в начале списка. Это одна из самых частых причин раздражения в мобильном каталоге. Обязательно сохраняйте позицию прокрутки и состояние фильтра при возврате из карточки, иначе весь путь пользователя обнуляется.
Тач-зоны и удобство пальцем
Мобильный интерфейс управляется пальцем, а не курсором, и это меняет требования к элементам. Мелкие десктопные чекбоксы и тесно составленные ссылки на телефоне промахиваются, что убивает фильтрацию быстрее любого тормоза.
- Крупные зоны нажатия. Чекбоксы, кнопки и пункты фильтра — с достаточным размером и отступами под палец.
- Кнопки на достижимой высоте. «Применить» и «Показать» — в зоне большого пальца, не под клавиатурой.
- Понятные состояния. Выбранный фильтр визуально отличается, сброс очевиден.
- Без случайных срабатываний. Свайпы и жесты не должны конфликтовать с прокруткой списка.
SEO-страницы фильтра и мобильная подача
Частый страх: если спрятать фильтр в шторку, пострадает SEO. Это заблуждение. Умный фильтр в 1С-Битрикс умеет формировать ЧПУ-адреса для значимых сочетаний свойств — так называемые SEO-страницы фильтра с собственными URL, заголовками и текстами. Визуальная подача (шторка на мобильном) и SEO-адресация — независимые вещи.
То есть комбинация «кроссовки + Nike + 42 размер» может оставаться отдельной посадочной страницей с уникальным адресом, даже если на телефоне пользователь пришёл к ней через шторку фильтров. Главное — настроить генерацию таких страниц и следить, чтобы они корректно отдавались и индексировались. Мобильная подача этому не мешает.
Частые ошибки мобильного каталога
- Десктопная колонка фильтров на телефоне. Съедает экран или ломает список товаров.
- Все свойства подряд. 40 фильтров на маленьком экране вместо 3–5 главных.
- Невключённый фасетный индекс. Фильтрация тормозит на большом каталоге.
- Мелкие тач-зоны. Чекбоксы и кнопки не попадаются пальцем.
- Сброс позиции при возврате. Вернулся из карточки — оказался в начале списка.
- Медленные подсказки поиска. Ответ приходит позже, чем человек допечатал запрос.
- Автоприменение после каждого тапа. Список дёргается на медленной сети.
- Кнопка «Применить» под клавиатурой. До неё невозможно дотянуться.
Чек-лист внедрения
- Фасетный индекс включён и перестроен. Умный фильтр считает результаты мгновенно.
- Фильтр вынесен в шторку. Кнопка «Фильтры» со счётчиком, товары на весь экран.
- Главные фильтры наверху. 3–5 ключевых свойств категории, остальные свёрнуты.
- Результаты считаются на лету. Число товаров на кнопке «Показать», применение по тапу.
- Поиск удобен. Крупное поле, автодополнение, недавние запросы, быстрые подсказки.
- Скорость закрыта. Кэш каталога, композитный сайт, подгрузка порциями, лёгкие превью.
- Прокрутка сохраняется. Возврат из карточки не сбрасывает список и фильтр.
- Тач-зоны крупные. Кнопки и чекбоксы удобны пальцем, «Применить» доступна.
- SEO-страницы фильтра работают. Значимые сочетания свойств имеют свои URL.
Вывод
Мобильный каталог — это не уменьшенный десктоп, а отдельная задача, где на равных важны интерфейс и техника. Вынесите фильтр в шторку, оставьте на виду 3–5 главных свойств, сделайте крупные тач-зоны и удобный поиск с быстрыми подсказками — и человек сможет найти товар одной рукой в метро.
Но красивый интерфейс не спасёт, если фильтрация тормозит. Включённый фасетный индекс умного фильтра, кэш каталога, композитный сайт и подгрузка товаров порциями — вот фундамент, на котором мобильный каталог 1С-Битрикс работает быстро. Соберите оба слоя вместе, и мобильная конверсия перестанет отставать от десктопной.
