UX умного фильтра на мобильных в 1С-Битрикс

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

Хорошая новость: в 1С-Битрикс за фильтрацию отвечает тот же умный фильтр на фасетном индексе, что и на десктопе, — переделывать движок не нужно. Задача чисто продуктовая и фронтендовая: спрятать панель в шторку, показать чипы выбранного, поставить счётчик результатов на кнопку и обновлять список без перезагрузок. Ниже — практический разбор мобильного UX фильтра: какие паттерны работают, как их собрать на штатных компонентах и что почти всегда портит впечатление. Это выжимка из наших проектов по повышению конверсии интернет-магазинов (CRO) на 1С-Битрикс — с конкретикой, без общих слов.

Почему мобильный фильтр — отдельная задача

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

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

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

Третье ограничение — сеть и внимание. Мобильный пользователь чаще в дороге, на нестабильном 4G, с ограниченным вниманием и терпением. Каждая перезагрузка страницы, каждый лишний тяжёлый запрос, каждая секунда ожидания — это шанс, что он закроет вкладку. Поэтому мгновенный отклик на действие и экономия трафика для мобильного фильтра не украшение, а условие выживания сценария.

Наконец, мобильная фильтрация тесно связана со всей мобильной версией магазина на 1С-Битрикс: sticky-шапка, мобильная карточка товара, кнопка «В корзину» под большим пальцем. Фильтр — часть этой системы, и проектировать его в отрыве от остального мобильного UX бессмысленно.

Боли фильтрации на телефоне

Прежде чем чинить, полезно назвать по именам все боли, которые убивают конверсию мобильного каталога. Мы регулярно видим один и тот же набор проблем на аудитах магазинов на Битрикс.

• Фильтр «съедает» экран. Открытая панель занимает всё, товаров не видно, и пользователь не понимает, к чему приведут его галочки.
• Непонятно, что выбрано. Наложив три условия и прокрутив список, человек забывает, какие фильтры активны, и не может их быстро снять.
• Нет отклика на действие. Поставил галочку — ничего видимо не изменилось. Неясно, применился фильтр или нет, сколько товаров осталось.
• Перезагрузка на каждый чек. Страница мигает и прыгает, скролл сбрасывается наверх, на медленной сети это секунды ожидания.
• Промах по контролу. Мелкие чекбоксы и узкий бегунок цены ловятся пальцем с третьей попытки, случайно выбираются не те значения.
• Слишком много всего. В шторку вывалены двадцать свойств, все раскрыты, простыня тянется бесконечно, и найти нужное невозможно.
• Кнопки применения не видно. «Показать» уехала за пределы экрана вниз, и непонятно, как вообще посмотреть результат.

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

Шторка снизу: главный паттерн вызова

Ключевое решение мобильного фильтра — где он физически находится, пока не нужен, и как появляется, когда нужен. Победивший на практике паттерн — шторка снизу (bottom sheet): панель фильтра лежит за пределами экрана внизу, а на её место в списке товаров стоит заметная кнопка «Фильтр». По касанию панель выезжает снизу вверх, затемняя список, пользователь настраивает условия и закрывает шторку кнопкой применения.

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

У шторки есть несколько обязательных элементов, без которых паттерн разваливается:

• Ручка-индикатор (grabber). Короткая горизонтальная чёрточка сверху шторки. Она сообщает «меня можно тянуть» и задаёт зону для жеста закрытия свайпом вниз.
• Заголовок и кнопка закрытия. «Фильтр» и крестик или «Готово» в углу — явный способ выйти, помимо свайпа и тапа по затемнению.
• Прокручиваемое тело. Список свойств скроллится внутри шторки, а шапка и подвал остаются на месте.
• Липкий подвал с кнопкой применения. «Показать N товаров» всегда видна внизу шторки, не уезжает при прокрутке свойств.
• Затемнение фона (backdrop). Полупрозрачная подложка над списком; тап по ней закрывает шторку.

Есть выбор между двумя вариантами глубины: частичная шторка (открывается на 60–80% высоты, список чуть виден сверху) и полная (почти на весь экран). Частичная лучше сохраняет контекст, но вмещает меньше свойств; полная удобна для каталогов с богатой фильтрацией. Разумный компромисс — открывать шторку на большую часть высоты, но оставлять сверху узкую полоску списка и обязательно держать чипы и счётчик на виду.

Чипы выбранного и быстрый сброс

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

Чипы (они же теги активных фильтров) — это строка компактных «пилюль» над списком товаров, каждая из которых показывает одно выбранное значение и содержит крестик для точечного сброса. «Apple ✕», «серый ✕», «от 10 000 ₽ ✕». Рядом или в конце строки — кнопка «Сбросить всё». Чипы дают сразу три вещи: показывают текущее состояние фильтра, не открывая шторку; позволяют снять одно условие одним касанием; и служат визуальным подтверждением, что фильтр вообще применился.

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

Несколько правил хорошей работы с чипами:

• Горизонтальный скролл, а не перенос на много строк. Если выбранного много, чипы прокручиваются вбок в одну строку, чтобы не отъедать пол-экрана.
• Диапазоны — одним чипом. «Цена 10 000–30 000 ₽» — это один чип, а не два, и его сброс возвращает бегунок в исходное положение.
• Мгновенное обновление. Сняли чип — список и счётчики пересчитались тут же, без открытия шторки.
• «Сбросить всё» всегда на виду. Одно действие возвращает пользователя к полному каталогу, если он «зафильтровался в ноль».

Отдельно про ситуацию «ноль результатов». Мобильный пользователь легко доводит фильтр до пустой выдачи, и хуже всего показать ему просто белый экран. Правильно — показать понятное сообщение «По вашим условиям ничего не нашлось», сохранить чипы (чтобы было видно, что снять) и предложить кнопку «Сбросить всё» или подсказать, какое условие сузило выборку сильнее всего. Счётчик на кнопке применения, который заранее показывает «Показать 0 товаров», вообще предотвращает этот тупик — пользователь видит ноль ещё в шторке и корректирует выбор, не закрывая её.

Счётчики результатов и мгновенный отклик

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

1. Счётчик у каждого значения. «Apple (128)», «Samsung (94)» — сколько товаров останется, если добавить это значение. Он подсказывает, какой выбор осмыслен, и предупреждает про тупики: значение с «(0)» лучше показать неактивным.
2. Счётчик на кнопке применения. «Показать 42 товара» — сколько всего останется по текущему набору условий. Он пересчитывается при каждом касании внутри шторки и превращает кнопку в живой индикатор результата.

Оба счётчика должны считаться по фасетному индексу — заранее просчитанной таблице соответствий «значение свойства → товары». Это принципиально: если счётчики считать обычным запросом к базе на каждое касание, на большом каталоге и мобильной сети вы получите заметную задержку и просадку. Умный фильтр Битрикса опирается на фасет из коробки — важно лишь построить и поддерживать индекс в актуальном состоянии. Подробный разбор того, как устроен и обновляется фасет, мы вынесли в отдельный материал про настройку умного фильтра в 1С-Битрикс.

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

• Оптимистичная отрисовка. Галочка и чип появляются сразу по касанию, не дожидаясь ответа сервера; счётчик обновляется, когда придёт свежее число.
• Отдельный лёгкий запрос за счётчиками. Пересчёт «сколько останется» — это компактный AJAX-ответ по фасету, а не перезагрузка всего списка.
• Дебаунс частых касаний. Если пользователь быстро тыкает несколько значений подряд, запросы группируются, чтобы не слать по одному на каждый чек.
• Скелетоны вместо пустоты. Пока список подгружается, показывайте контуры карточек, а не белый экран, — воспринимаемая скорость выше.

Мгновенное применение или кнопка «Показать»

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

Гибрид работает так: пользователь ставит галочки внутри шторки, и на каждое касание мгновенно пересчитывается только счётчик на кнопке («Показать 42» → «Показать 18») лёгким запросом к фасету. Сам тяжёлый список товаров под шторкой перерисовывается один раз — когда человек нажимает «Показать» и шторка закрывается. Так пользователь на каждом шаге видит отклик (число меняется), но мобильный трафик не тратится на полную перерисовку списка после каждого чека, а скролл не прыгает.

Есть исключение: одиночные быстрые фильтры-чипы над списком (например, переключатели «В наличии», «Со скидкой», «Хиты») уместно применять полностью мгновенно. Они меняют выборку предсказуемо, стоят прямо над товарами, и пользователь сразу видит эффект без открытия шторки. Комбинируйте: тяжёлую многосвойственную фильтрацию — в шторку с кнопкой, лёгкие популярные переключатели — мгновенными чипами наверху.

Контролы под палец: чекбоксы, диапазоны, цвет

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

Списки значений (бренд, материал, тип). Чекбоксы с крупной зоной нажатия — не 16 пикселей квадратик, а вся строка «галочка + подпись + счётчик» кликабельна на высоту не меньше 44 пунктов. Длинные списки сворачивайте: показывайте топ-5–7 значений и ссылку «Показать ещё», а для очень длинных (сотни брендов) добавляйте строку поиска внутри свойства.

Диапазоны (цена, вес, диагональ). Бегунок «от и до» на телефоне неудобен: пальцем сложно поймать тонкую ручку, а две ручки на одной шкале конфликтуют. Лучше сочетать бегунок с двумя полями ручного ввода «от» и «до» и предлагать готовые пресеты-диапазоны («до 10 000», «10–30 тыс», «30 тыс+») крупными кнопками. Пресеты закрывают 80% сценариев одним касанием.

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

Флаги (в наличии, со скидкой, новинка). Их место — не в глубине шторки, а быстрыми переключателями-чипами над списком. Это самые частые фильтры, и прятать их нелогично.

Общие правила эргономики касания в шторке:

• Зона нажатия от 44×44 пунктов. Меньше — палец промахивается, растёт число ошибочных выборов.
• Разнос между интерактивными элементами. Соседние строки и кнопки не должны стоять впритык — иначе тап попадает не туда.
• Свойства свёрнуты по умолчанию. Аккордеон: заголовок свойства + число выбранного, раскрытие по тапу. Так шторка не превращается в бесконечную простыню.
• Приоритет частого. Сверху шторки — свойства, которыми пользуются чаще всего (цена, бренд, наличие); редкие — ниже.

Архитектура мобильного фильтра в Битрикс

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

• Свойства инфоблока каталога. Источник данных фильтра; их типы и флаг «умной фильтрации» определяют, попадёт ли характеристика в фасет.
• Фасетный индекс. Денормализованная таблица «товар → значения свойств», по которой мгновенно считаются счётчики и пересечения.
• Компонент catalog.smart.filter. Формирует панель фильтра и данные для счётчиков; его кастомный шаблон отвечает за мобильную разметку шторки.
• Компонент catalog.section. Выводит список товаров по условиям фильтра; на мобильном обновляется через AJAX.
• AJAX-слой. Лёгкие запросы за счётчиками при касании и запрос за списком по кнопке «Показать»; без полной перезагрузки страницы.
• Слой кэша. Управляемый и композитный кэш, чтобы панель и выборка не пересобирались на каждый запрос.

Правильный сценарий работы на телефоне выглядит так. Страница раздела отдаётся сразу со списком товаров и с панелью фильтра, спрятанной в шторку через CSS. Пользователь открывает шторку, касается значений — фронтенд шлёт компактные AJAX-запросы к тому режиму компонента фильтра, который возвращает только пересчитанные счётчики. Кнопка «Показать N» обновляется мгновенно. По нажатию «Показать» уходит один запрос к catalog.section, список перерисовывается через History API без перезагрузки, а адрес в строке браузера меняется на корректный ЧПУ или GET-параметры фильтра, чтобы результат можно было сохранить и расшарить.

Важная деталь — работа с URL и историей. Даже без перезагрузки страницы состояние фильтра должно отражаться в адресе (через history.pushState), иначе кнопка «Назад» браузера будет вести себя непредсказуемо, а пользователь не сможет поделиться отфильтрованной выдачей. Это же требование связывает мобильный фильтр с SEO: осмысленные комбинации отдаются как индексируемые ЧПУ-страницы, а технические параметры — канонизируются.

Реализация в 1С-Битрикс пошагово

1. Проверьте фундамент — умный фильтр и фасет. Убедитесь, что фильтруемые свойства типа «список» или «число», у них включена умная фильтрация, а фасетный индекс построен и актуален. Без этого мгновенные счётчики на мобильном не заведутся. База разобрана в статье про умный фильтр в 1С-Битрикс.
2. Скопируйте шаблон компонента фильтра. Возьмите шаблон bitrix:catalog.smart.filter в свой /local/ и правьте копию, а не системный шаблон. Это защищает от потери правок при обновлении платформы.
3. Соберите разметку шторки. Оберните панель фильтра в контейнер bottom sheet: ручка-grabber, заголовок, прокручиваемое тело со свойствами-аккордеонами, липкий подвал с кнопкой «Показать». На десктопе тот же контейнер — обычная колонка (переключение через медиазапросы).
4. Добавьте кнопку вызова и чипы. Над списком товаров разместите липкую кнопку «Фильтр» с бейджем числа активных условий и строку чипов выбранного с крестиками и «Сбросить всё».
5. Настройте AJAX-счётчики. На касание значения шлите лёгкий запрос к компоненту фильтра за пересчётом счётчиков по фасету и обновляйте число на кнопке «Показать N товаров» и у каждого значения.
6. Подключите AJAX-обновление списка. По кнопке «Показать» обновляйте catalog.section без перезагрузки, меняйте URL через History API, показывайте скелетоны на время загрузки и не сбрасывайте скролл.
7. Включите кэш. Тип кэша компонентов — «Авто» (managed cache), настройте композит, чтобы статическая часть страницы отдавалась мгновенно, а фильтр догружал динамику.
8. Прогоните на реальных устройствах. Проверьте на нескольких телефонах и на медленной сети: зоны касания, отклик счётчиков, поведение «назад», состояние «ноль результатов».

Как это выглядит в админке и шаблоне

Управление мобильным фильтром распределено между двумя местами. Данные и умная фильтрация настраиваются в свойствах инфоблока и в разделе торгового каталога (типы свойств, флаг «Участвует в умной фильтрации», построение фасета). Поведение и вид шторки — в кастомном шаблоне компонента catalog.smart.filter. Схематично мобильная раскладка шторки в шаблоне выглядит так:

В коде шаблона это разделяется так: серверная часть (PHP шаблона catalog.smart.filter) отдаёт полную панель свойств и счётчики из фасета; клиентская часть (CSS + немного JS) отвечает за то, как эта панель ведёт себя — колонкой на десктопе или шторкой на телефоне. Один и тот же HTML, разное поведение по медиазапросу. AJAX-логику пересчёта счётчиков и обновления списка удобно держать в отдельном скрипте шаблона, а не размазывать по странице.

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

Производительность и воспринимаемая скорость

На мобильных различают две скорости: реальную (сколько миллисекунд считает сервер) и воспринимаемую (насколько быстрым интерфейс ощущается). Для конверсии важнее вторая, и управлять ею нужно осознанно.

Реальная скорость упирается в фасет и кэш. Счётчики должны считаться по фасетному индексу (десятки миллисекунд), а не запросом к базе на каждое касание. Панель фильтра и выборка товаров должны кэшироваться, иначе под нагрузкой они пересобираются заново на каждый клик. Композитный кэш отдаёт статическую часть страницы каталога мгновенно, а фильтр и список догружаются поверх — это прямо улучшает метрики Core Web Vitals на смартфонах.

Воспринимаемая скорость складывается из приёмов, которые мы уже упоминали, но здесь сведём их в систему:

Особое внимание — сдвигам макета (CLS). На мобильном фильтре они возникают, когда шторка выезжает и толкает контент, когда чипы появляются и сдвигают список, когда карточки догружаются и «прыгают». Резервируйте место под чипы и кнопку фильтра заранее, задавайте размеры карточкам, используйте скелетоны фиксированной высоты — и список не будет дёргаться под пальцем. О связке производительности и мобильного UX подробно — в статье про мобильную версию магазина на 1С-Битрикс.

Доступность и эргономика касаний

Доступный фильтр — не только про людей с ограничениями, но и про всех, кто пользуется телефоном одной рукой в неидеальных условиях. Базовые требования, которые заодно улучшают UX для всех:

• Зоны касания и разнос. Интерактивные элементы не меньше 44×44 пунктов, между ними — воздух. Это снижает число ошибочных нажатий у всех пользователей.
• Ловушка фокуса в шторке. Когда шторка открыта, фокус и скролл заперты внутри неё; экранный диктор не «проваливается» в список под затемнением.
• Явные подписи. Цветовые образцы и иконки сопровождаются текстом; кнопки-крестики на чипах имеют aria-label вида «Убрать фильтр: Apple».
• Контраст и размер шрифта. Счётчики и подписи значений читаемы на солнце и на маленьком экране; не делайте счётчик у значения бледно-серым и мелким.
• Управление с клавиатуры и озвучка. Открытие/закрытие шторки, выбор значений и применение доступны без мыши; изменения счётчика анонсируются через aria-live.
• Уважение к «уменьшенной анимации». Если система просит меньше движения, отключайте эффектную анимацию выезда шторки, оставляя мгновенное появление.

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

Сравнение паттернов вызова фильтра

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

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

Метрики и A/B-тестирование

«Стало удобнее» — субъективно. Чтобы понимать, что мобильный фильтр действительно помогает продавать, смотрите на цифры. Ключевые метрики фильтрации:

• Доля сессий с открытием фильтра. Сколько мобильных посетителей вообще открывают шторку. Низкая доля — кнопку не замечают или в фильтре не видят смысла.
• Доля применений после открытия. Открыли шторку и нажали «Показать» против закрыли без применения. Много «закрыл без применения» — фильтр пугает или неудобен.
• Конверсия отфильтрованных сессий. Пользователи, применившие фильтр, обычно конвертируются заметно лучше — если нет, значит фильтр приводит не к тем товарам.
• Доля пустых выдач. Как часто фильтр приводит к «ноль результатов». Высокая — плохо подобраны значения или не работают счётчики-предупреждения.
• Глубина фильтрации. Сколько условий в среднем накладывают; помогает понять, какие свойства реально нужны, а какие лишние.

Мобильный фильтр — отличная площадка для A/B-тестов, потому что изменения точечные и эффект хорошо измеряется. Что стоит проверять экспериментами: счётчик на кнопке против безликой «Применить»; мгновенное применение против кнопки; частичная шторка против полной; набор и порядок свойств; наличие быстрых чипов над списком. Тестируйте по одному изменению за раз и смотрите не только на клики по фильтру, но и на итоговую конверсию в заказ. Системный подход к таким экспериментам — часть работы по CRO для магазина на 1С-Битрикс.

Частые ошибки

• Десктопную колонку фильтра просто «сжали» медиазапросом — панель сваливается под список, ловить контролы пальцем невозможно.
• Нет чипов выбранного — пользователь, прокрутив список, забывает, что уже отфильтровал, и не может снять условие.
• Нет счётчика на кнопке — «Применить» без числа не даёт отклика, страшно нажимать «вслепую».
• Список перерисовывается на каждый чек — на медленной сети мигание, скачки скролла и лишний трафик.
• Счётчики считаются запросом к базе, а не по фасету — задержка на каждое касание, особенно после обмена с 1С без переиндексации.
• В шторку вывалены все свойства раскрытыми — бесконечная простыня, нужное не найти; нет аккордеона и приоритета частого.
• Мелкие зоны касания и контролы впритык — пользователь промахивается и выбирает не те значения.
• Кнопка «Показать» уезжает за экран — нет липкого подвала, непонятно, как посмотреть результат.
• Состояние фильтра не пишется в URL — кнопка «Назад» ведёт себя странно, отфильтрованную выдачу нельзя расшарить.
• Все комбинации фильтра открыты индексации — шторка на мобильных плодит тысячи страниц-дублей с GET-параметрами.

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

Сведём всё в практический список, по которому удобно принимать готовность мобильного фильтра перед запуском:

1. Фундамент готов. Свойства типизированы, умная фильтрация включена, фасетный индекс построен и переиндексируется после обмена с 1С.
2. Шторка собрана. Bottom sheet с grabber, заголовком, прокручиваемым телом и липким подвалом; закрывается свайпом, крестиком и тапом по затемнению.
3. Чипы и бейдж на месте. Над списком — чипы выбранного с крестиками и «Сбросить всё»; на кнопке вызова — число активных фильтров.
4. Счётчики живые. Число на кнопке «Показать N» и у значений считаются по фасету и обновляются мгновенно при касании.
5. Отклик мгновенный. Оптимистичная отрисовка, скелетоны, дебаунс частых касаний; список обновляется без перезагрузки и без скачков скролла.
6. Контролы под палец. Зоны от 44 пунктов, аккордеоны свойств, пресеты диапазонов, цветовые образцы, поиск в длинных списках.
7. URL и «Назад» корректны. Состояние фильтра пишется в адрес через History API; осмысленные комбинации — ЧПУ, мусорные — канонизированы и закрыты.
8. Кэш включён. Тип кэша компонентов «Авто», настроен композит; каталог виден почти сразу при заходе.
9. Доступность проверена. Ловушка фокуса в шторке, aria-подписи, контраст, уважение к «уменьшенной анимации».
10. Метрики настроены. Отслеживаются открытия фильтра, применения, конверсия отфильтрованных сессий и доля пустых выдач.

Вывод

Хороший мобильный фильтр в 1С-Битрикс — это не новый движок, а грамотная подача уже имеющегося: панель в шторке снизу, чипы выбранного над списком, живой счётчик результатов на кнопке и мгновенный отклик через AJAX к фасетному индексу без перезагрузок. Добавьте контролы под палец, стабильный макет без скачков и корректную работу с URL — и фильтр из барьера превратится в главный инструмент, которым покупатель с телефона находит нужный товар за пару касаний. А растущая доля мобильного трафика делает эту работу одной из самых окупаемых в магазине.