Фильтры на мобильном: модальные окна и удобный сброс

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

Эта статья — о том, как сделать умный фильтр удобным именно на смартфоне: спрятать его за кнопку и открывать в модальном окне, показывать счётчик товаров заранее, дать быстрый сброс и обновлять выдачу через AJAX без перезагрузки. Всё — на штатном компоненте catalog.smart.filter 1С-Битрикс. Если каталог тормозит и его нужно ускорять системно, поможет наша услуга аудита и оптимизации 1С.

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

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

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

В чём боль десктопного фильтра на телефоне

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

• Фильтр теряется. Боковая колонка при адаптиве уезжает под товары, и пользователь просто не догадывается, что фильтр вообще есть.
• Занимает весь поток. Если фильтр остаётся сверху, до первого товара нужно пролистать длинный список свойств.
• Каждый клик — перезагрузка. Без AJAX выбор значения перезагружает страницу и выбрасывает человека наверх, теряя контекст.
• Непонятен результат. Пользователь выбирает параметры вслепую, не зная, останется ли хоть один товар.
• Сброс спрятан. Кнопка «сбросить» где-то внизу, и снять неудачный фильтр сложнее, чем его поставить.

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

Паттерн «кнопка + модальное окно»

Базовый и проверенный паттерн мобильного фильтра — закреплённая кнопка «Фильтр», которая открывает модальное окно на весь экран. Пользователь видит выдачу, при необходимости нажимает кнопку, спокойно настраивает параметры в отдельном слое и возвращается к результатам.

Как устроено модальное окно фильтра

• Шапка. Заголовок «Фильтр», ссылка «Сбросить» и крестик закрытия — всё в зоне большого пальца.
• Тело. Прокручиваемый список свойств: важные раскрыты, второстепенные — в аккордеонах.
• Закреплённая кнопка внизу. «Показать N товаров» всегда видна и не уезжает при прокрутке.

Кнопку открытия фильтра часто делают «липкой» (sticky) — она остаётся доступной при скролле выдачи. Рядом с ней уместно показывать индикатор активных фильтров (например, точку или число), чтобы пользователь помнил, что выборка сужена. Такой паттерн знаком по крупным маркетплейсам, поэтому не требует обучения.

Счётчик товаров: показать заранее

Главная тревога мобильного пользователя при работе с фильтром — «а не окажется ли выдача пустой». Когда человек выбирает несколько параметров вслепую и только потом видит «ничего не найдено», он раздражается и уходит. Счётчик товаров снимает эту тревогу: кнопка применения показывает, сколько позиций останется, ещё до перехода к выдаче.

Умный фильтр 1С-Битрикс умеет считать количество подходящих товаров по фасетному индексу, поэтому счётчик можно обновлять на лету при каждом изменении параметра. Дополнительно полезно:

• Обновлять счётчик по каждому клику. Пользователь сразу видит, как параметр влияет на выборку.
• Гасить недоступные значения. Если по значению не остаётся товаров, его показывают неактивным или с «0».
• Предупреждать о пустой выдаче. Когда остаётся ноль товаров, об этом сообщают до применения, а не после.

Счётчик — дешёвая по реализации, но сильная по эффекту вещь: он превращает фильтр из «угадайки» в понятный инструмент, где виден результат каждого действия.

Удобный сброс и чипсы значений

Поставить фильтр легко — сложнее его аккуратно снять. На мобильном сброс должен быть таким же заметным, как и применение. Иначе пользователь, случайно сузивший выдачу «в ноль», не найдёт, как вернуться, и уйдёт из каталога.

Две связки работают лучше всего:

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

Важно, чтобы сброс не выкидывал человека наверх каталога и не сбрасывал прокрутку. Хороший сброс работает через тот же AJAX, что и применение: значения снимаются, счётчик и выдача обновляются на месте. Тогда пользователь чувствует контроль над выборкой, а не борется с интерфейсом.

AJAX-выдача без перезагрузки

Ключевая техническая опора удобного мобильного фильтра — обновление выдачи через AJAX. Без него каждый выбор значения перезагружает страницу целиком: экран моргает, пользователь оказывается вверху каталога, теряет позицию и терпение. На медленном мобильном соединении такая перезагрузка ощущается как «завис сайт».

Умный фильтр Битрикса штатно работает в паре с компонентом списка товаров и умеет обновлять выдачу без полной перезагрузки. Что важно настроить:

• Применение без ухода со страницы. Кнопка «Показать» обновляет список товаров и закрывает модалку, не перезагружая документ.
• Обновление счётчика на лету. Каждое изменение параметра пересчитывает количество через лёгкий запрос.
• Индикатор загрузки. Пока выдача обновляется, показывают скелетон или спиннер, чтобы человек понимал, что процесс идёт.
• Корректный URL. Состояние фильтра отражается в адресной строке, чтобы ссылку можно было сохранить и повторить.

Если каталог построен на устаревшем шаблоне без нормального AJAX, обновление фильтра — часть более крупной работы по автоматизации на 1С и модернизации витрины. Скорость и архитектуру фронтенда мы разбираем и в статье про headless-коммерцию на Битрикс.

Приоритет и порядок фильтров

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

1. Наверх — ключевое. Цена, наличие, бренд и главные для категории характеристики раскрыты сразу.
2. Ниже — второстепенное. Редко используемые свойства сворачивают в аккордеоны, чтобы не удлинять экран.
3. Длинные списки — с поиском. Если у бренда или другого свойства десятки значений, добавляют поле поиска внутри фильтра и «показать ещё».
4. Разные категории — разный порядок. Для обуви важен размер, для техники — мощность; порядок настраивают под раздел.

Продуманный порядок фильтров сокращает путь до нужного параметра до пары секунд. Это чистая работа с UX, которая не требует разработки — только настройки свойств инфоблока и приоритетов в умном фильтре.

Фасетный индекс и скорость

Никакой удобный интерфейс не спасёт, если фильтр отвечает секундами. На мобильном терпение короче, а соединение хуже, поэтому скорость выдачи критична. Основа быстрого умного фильтра в 1С-Битрикс — фасетный индекс.

Фасетный индекс — это заранее построенная таблица соответствий «значение свойства → товары». Благодаря ей фильтр не гоняет тяжёлые запросы к каталогу на каждый клик, а быстро отдаёт и выдачу, и счётчики, и доступные значения. Что держит фильтр быстрым:

• Включённый и актуальный фасетный индекс. Его нужно строить и обновлять при изменении товаров и свойств.
• Кэширование компонентов. Умный фильтр и список товаров кэшируются, чтобы частые запросы не били в базу.
• Композитный сайт. Статическая часть каталога отдаётся мгновенно, а фильтр и цены догружаются.
• Оптимизированные свойства. В фильтр выносят только те свойства, которые реально нужны, не раздувая индекс.

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

Сохранение состояния и URL

Типичный мобильный сценарий: пользователь отфильтровал каталог, открыл товар, посмотрел и нажал «назад». Он ожидает вернуться к той же отфильтрованной выдаче на том же месте — а не к сброшенному каталогу сверху. Если фильтр «забывает» выбор, человек раздражается и часто уходит.

Чтобы этого не происходило, состояние фильтра нужно сохранять:

• Фильтр в URL. Умный фильтр Битрикса умеет отражать выбранные значения в ЧПУ-пути, поэтому отфильтрованная выдача имеет собственный адрес.
• Восстановление прокрутки. При возврате из карточки желательно вернуть человека на ту же позицию списка.
• Ссылка, которой можно поделиться. Раз состояние в URL, отфильтрованную выборку можно сохранить в закладки или переслать коллеге.

Отражение фильтра в URL полезно и для SEO: отфильтрованные страницы могут иметь собственные адреса и попадать в индекс по запросам вида «бренд + категория». Это уже пересечение UX и продвижения, но начинается всё с корректно настроенных ЧПУ умного фильтра.

Реализация на catalog.smart.filter

Соберём мобильный фильтр из штатных возможностей 1С-Битрикс. Названия пунктов зависят от редакции и версии, но логика такая:

1. Включите умный фильтр. Компонент catalog.smart.filter в связке со списком товаров, свойства для фильтрации отмечены в инфоблоке.
2. Постройте фасетный индекс. Включите фасетный индекс для инфоблока каталога и настройте его обновление при изменениях.
3. Настройте AJAX. Применение фильтра и постраничная навигация обновляют выдачу без полной перезагрузки страницы.
4. Оформите мобильную обёртку. Скрытие фильтра за кнопкой, открытие в модальном окне на весь экран, липкая кнопка «Показать N».
5. Добавьте счётчик и чипсы. Кнопка применения показывает количество товаров, над выдачей — чипсы выбранных значений со сбросом.
6. Задайте порядок свойств. Важные фильтры раскрыты сверху, второстепенные — в аккордеонах, длинные списки — с поиском.
7. Проверьте состояние в URL. Отфильтрованная выдача имеет собственный адрес, возврат из карточки сохраняет выбор.
8. Протестируйте на реальных телефонах. Разные экраны, медленное соединение, палец одной руки — а не только эмулятор в браузере.

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

Частые ошибки мобильного фильтра

• Десктопная колонка на телефоне. Боковой фильтр уезжает под товары, пользователь его не находит.
• Нет счётчика. Человек выбирает параметры вслепую и упирается в пустую выдачу после применения.
• Каждый клик — перезагрузка. Без AJAX экран моргает и выбрасывает наверх, теряя контекст.
• Спрятанный сброс. Снять неудачный фильтр сложнее, чем поставить, и человек уходит.
• Все свойства подряд. Нет приоритета — до нужного параметра приходится долго листать.
• Медленный фильтр. Нет фасетного индекса и кэша, выдача думает секундами на мобильном соединении.
• Фильтр не в URL. Возврат из карточки сбрасывает выбор, отфильтрованную выдачу нельзя сохранить.

Чек-лист внедрения

1. Фильтр за кнопкой. На мобильном фильтр открывается в модальном окне на весь экран, кнопка липкая.
2. Счётчик работает. Кнопка «Показать N товаров» обновляется при каждом изменении параметра.
3. Сброс заметен. Ссылка «Сбросить» в шапке и чипсы значений с крестиками над выдачей.
4. AJAX включён. Применение и пагинация обновляют выдачу без полной перезагрузки, с индикатором загрузки.
5. Порядок свойств задан. Важное сверху раскрыто, второстепенное в аккордеонах, длинные списки с поиском.
6. Фасетный индекс актуален. Индекс построен и обновляется, компоненты кэшируются.
7. Состояние в URL. Отфильтрованная выдача имеет адрес, возврат из карточки сохраняет выбор и прокрутку.
8. Проверено на телефонах. Тест на реальных устройствах и медленном соединении, а не только в эмуляторе.

Вывод

Мобильный фильтр — это не уменьшенная копия десктопного, а отдельный паттерн. На смартфоне фильтр прячут за кнопку и открывают в модальном окне, показывают счётчик товаров заранее, дают заметный сброс и обновляют выдачу через AJAX без перезагрузки. Скорость держит фасетный индекс и кэш, а сохранение состояния в URL не даёт потерять выбор при возврате из карточки.

Всё это собирается на штатном catalog.smart.filter 1С-Битрикс плюс аккуратная мобильная обёртка. Разница в конверсии заметна именно на мобильном трафике, которого у большинства магазинов уже больше половины. Приведите фильтр к маркетплейс-уровню — и покупатель начнёт доходить до карточки и корзины, а не закрывать вкладку на длинном списке свойств.