Если мобильный фильтр не открывается, пользователь не может сузить каталог и быстро уходит. Для интернет-магазина это бьет по просмотрам товаров и конверсии, особенно с телефона.

Проверяйте не только кнопку. Часто клик проходит, но панель фильтра остается под overlay, получает display none на другом брейкпоинте или ломается из-за JS-ошибки до открытия.

Коротко: что сделать

  • Проверить клик по кнопке в мобильном viewport
  • Посмотреть ошибки JavaScript в консоли
  • Проверить классы открытия панели фильтра
  • Проверить z-index, position и overflow
  • Проверить, не блокирует ли клик другой элемент

Основные причины

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

  • JS-обработчик не привязан после ajax-перерисовки каталога
  • Панель открывается, но остается под шапкой или overlay
  • CSS брейкпоинт скрывает фильтр на нужной ширине
  • Scroll-lock блокирует страницу и не показывает панель
  • После обновления шаблона изменились классы кнопки

Пошаговая диагностика

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

  • В DevTools включить mobile mode и нажать кнопку
  • Проверить изменение classList после клика
  • Временно поднять z-index панели для проверки
  • Проверить computed styles: display, visibility, transform
  • Проверить, не перехватывает ли клик баннер cookie или меню

Как исправить проблему

Исправление должно закрывать первопричину, а не только маскировать симптом. Если затронуты доступы, платежи, данные клиентов или серверные настройки, сначала сделайте резервную копию и проверьте правку на тестовом сценарии.

  • Обновить JS-селекторы и делегирование событий
  • Исправить z-index и слой overlay
  • Настроить CSS для нужных брейкпоинтов
  • Добавить корректное закрытие фильтра и scroll-lock
  • Проверить работу после ajax-обновления товаров

Безопасный план решения

Сначала почините открытие и закрытие фильтра без изменения логики поиска. Затем проверьте применение параметров, сброс и сохранение выбранных значений.

Чего не стоит делать

  • Не прятать фильтры полностью на мобильном без альтернативы
  • Не делать панель фильтра шире экрана
  • Не использовать hover для основных действий на телефоне
  • Не ломать desktop-фильтр при правке mobile CSS

Что подготовить перед исправлением

  • URL каталога
  • Ширина экрана, где не работает фильтр
  • Скрин или запись клика
  • Список последних изменений шаблона или плагинов

FAQ

Почему фильтр работает на ПК, но не на телефоне?

На мобильном часто используются другие кнопки, панели, брейкпоинты и обработчики событий.

Что важнее: фильтр или сортировка?

Для каталога оба важны, но мобильный фильтр обычно сильнее влияет на глубину просмотра.

Нужно ли делать фильтр отдельной страницей?

Иногда да, но чаще достаточно нормальной выезжающей панели с понятными кнопками применить и сбросить.

Когда стоит обратиться за помощью

Помощь нужна, если мобильный трафик основной и пользователи не могут выбрать категорию, цену, размер, город или другие параметры.

Итог

Проверьте JS, z-index, брейкпоинты и overlay. Если нужно быстро починить мобильный фильтр каталога, пишите в Telegram @rabotator_support.