Собственный интерфейс фильтрации на Shopify Search & Discovery

Страница коллекции, это место, где покупатель сужает каталог до нескольких товаров, которые действительно может купить. Интерфейс для этого может быть полностью собственным. Движок под ним не обязан таким быть, и в Absolute Support он таким не был. Вот как собственная мобильная фильтрация осталась связанной с нативным facet-движком Shopify, а не заменила его.

Это второй из трёх подробных разборов по кейсу Absolute Support. Он следует за разбором compression PDP и ведёт к разбору редактируемых мерчантом секций.

Проблема, в одном абзаце

Покупатели приходят в каталог компрессионных изделий с разных отправных точек. Кто-то мыслит типом изделия (носки, чулки, колготки, рукава). Кто-то мыслит уровнем компрессии. Кто-то мыслит категорией состояния или назначения. Кто-то мыслит полом или общей категорией каталога, а кто-то просто хочет отсортировать по цене. Страница коллекции должна была представить собственную, специфичную для бренда фильтрацию для всех этих сценариев, сначала на телефоне, не превращая саму фильтрацию в собственный код, который мог бы разойтись с Shopify.

Ограничения

• Фильтрацией уже владеет Shopify. Search & Discovery от Shopify вычисляет и применяет facets, а состояние фильтра хранит в URL коллекции. facet, для тех, кто впервые слышит термин, это одно измерение фильтра, например размер, цвет или цена.
• URL коллекций должны оставаться осмысленными. Отфильтрованная коллекция, это URL, которым можно поделиться и который индексируется. Собственный движок, придумавший своё состояние, сломал бы это.
• Сортировка и результаты, это поведение платформы. Порядок сортировки и отрисованная сетка товаров приходят от Shopify. Собственный слой должен их представлять, а не пересчитывать.
• Один движок фильтрации, а не два. Риск любого собственного UI фильтра в том, что незаметно строится второй источник истины о том, «что отфильтровано». Именно этого нужно было избежать.

Замечание о зонах ответственности перед реализацией: таксономия каталога здесь частично конфигурация Shopify, частично собственное представление. Facets, которые показывает коллекция, настраиваются в админке Shopify. Тема их отрисовывает и переоформляет. Я настроил и представил, я не строил facet-движок.

Решение: собственная оболочка, нативный движок

Интерфейс написан вручную. Состояние фильтрации и результаты остаются нативными для Shopify.

Custom mobile filter UI      (authored presentation)
  filter bar · price slider · view toggle
        |
        v
Native facet form            (Shopify)
        |
        v
Search & Discovery           (Shopify engine)
        |
        v
Updated collection results   (Shopify-rendered)
  product URLs · sorting · filter state

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

Как части соединяются

Собственные элементы управления не выполняют свою фильтрацию. Они обновляют поля ввода facet-формы Shopify и позволяют Shopify делать работу.

Собственные элементы управления пишут в нативную форму. Когда покупатель меняет фильтр в собственном UI, это действие обновляет соответствующее нативное facet-поле. Затем facet-механизм Shopify запрашивает отфильтрованные результаты и заново отрисовывает сетку. Результаты, счётчики и URL, это вывод Shopify.

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

Сами facets настраиваются в админке. На живой витрине facets коллекции включают пол, тип высоты или длины, деталь стопы (закрытый или открытый мысок), размер, цвет, цену и наличие. Уровень компрессии выражается через структуру коллекций и навигации, а не как facet внутри коллекции, и это осознанный выбор таксономии, который стоит отметить.

Части собственного интерфейса

Написанный вручную слой, это небольшой набор частей:

• Мобильная панель фильтров, открывающая элементы управления фильтрацией.
• Панель фильтров, содержащая опции facet.
• Слайдер диапазона цены с двумя ползунками, наложенный поверх нативных полей цены.
• Переключатель вида «сетка или список» для карточек товаров.
• Запоминаемое предпочтение вида, сохраняемое на клиенте, чтобы выбор покупателя между сеткой и списком сохранялся между визитами.
• Представление сортировки, выводящее нативные опции сортировки Shopify в собственном UI.

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

Инструмент подбора товара на основе тегов

Отдельно от фильтров коллекции, витрина включает инструмент подбора товара. Стоит точно описать, что это такое.

Покупатель выбирает пол или категорию каталога, уровень компрессии и стиль. Затем инструмент строит подходящий URL коллекции или направляет на него, используя структуру тегов магазина. Это весь механизм.

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

Mobile-first UX фильтрации

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

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

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

Другое поведение я рассматриваю как цели дизайна и открытые пункты для проверки, а не как утверждения, потому что оно не тестировалось формально:

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

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

Что осталось нативным

Собственный слой никогда не брал на себя следующее:

• facet-движок Search & Discovery
• Состояние фильтрации, хранящееся в URL коллекции
• Сортировка
• Отрисовка коллекции
• URL товаров
• Поиск

Проверка

На уровне реализации, а не бизнес-метрика:

• Собственные элементы управления передают свои действия в нативную facet-форму.
• Фильтрация и сортировка остаются нативными для Shopify.
• Мобильное представление собственное.
• Предпочтение сетки или списка запоминается на клиенте.
• Инструмент подбора маршрутизирует через логику коллекций на основе тегов, а не через скоринг или рекомендации.

Компромиссы

• Подбор на основе тегов зависит от чистых данных. Поскольку инструмент подбора маршрутизирует по тегам, несогласованная простановка тегов может отправить запрос к пустому результату. Это гигиена данных, а не дефект интерфейса.
• Слайдер с двумя ползунками требует аккуратной синхронизации. Собственный элемент управления перед нативными полями должен держать их строго синхронными, иначе видимый диапазон и применённый диапазон могут разойтись.
• Изменения в Search & Discovery могут потребовать согласования. Собственный слой находится поверх facet-разметки Shopify, поэтому изменение платформы здесь требует ручного вмешательства.
• Запоминаемое предпочтение вида, это состояние клиента. Как предпочтение отображения это нормально, но оно должно им и оставаться. Оно никогда не должно вырасти во второе определение каталога.

Что я улучшил бы дальше

• Нормализовать теги товаров, чтобы маршруты инструмента подбора никогда не упирались в тупик из-за несовпадения имён.
• Усилить обработку пустого результата, чтобы отфильтрованный вид без товаров вёл покупателя к чему-то полезному.
• Добавить интеграционные тесты состояния фильтра, которые проверяют, что URL и отрисованные результаты согласуются после изменения.
• Проверить работу с клавиатуры и размеры зон касания у панели фильтров, слайдера и переключателя.
• Задокументировать таксономию и соглашения по тегам, на которые опираются пути подбора.

Дальше: Слой редактируемых мерчантом секций на Dawn, это то, как остальная часть витрины остаётся редактируемой, не превращая тему в конструктор страниц.