Как спроектировать категории и фильтры каталога

Каталог начинается с языка покупателя

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

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

Нарисуй несколько маршрутов. Один человек знает тип товара и идёт в категорию. Другой пришёл из выдачи на карточку и хочет посмотреть аналоги. Третий ищет всё по артикулу. Главная, поиск, категории и карточки должны поддерживать эти входы. Не заставляй человека проходить всё дерево сверху вниз, если он уже оказался рядом с нужным товаром.

Категория, свойство и вариант решают разные задачи

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

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

При проектировании фильтра размера уточни особый случай. У модели есть размер M, но только в красном цвете. Пользователь выбрал M и синий. Должна ли карточка остаться? Если цель фильтра — показать варианты, которые можно купить, сочетание должно проверяться на одном доступном варианте. Иначе фильтр выдаст обещание, которое рассыплется в карточке. Запиши это правило в ТЗ и добавь к тестовой выборке.

Разложи свойства до работы с интерфейсом

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

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

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

Что оставить поиску

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

Фильтр нужен в первую очередь для выбора на сайте. Не каждое сочетание параметров должно стать отдельной поисковой страницей. «Женские зимние куртки» может быть понятной посадочной, если есть спрос, постоянный ассортимент и полезное содержание. Случайное сочетание цены, сортировки и двух цветов вряд ли стоит продвигать отдельно. Такие решения согласуй с SEO-специалистом вместе с правилами для URL и индексирования.

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

Пример структуры магазина одежды

Допустим, магазин продаёт верхнюю одежду и аксессуары. В основном меню есть «Куртки», «Пальто» и «Аксессуары». В категории курток доступны размер, сезон, цвет и наличие. Ключевые категории имеют отдельные адреса. Для зимних моделей команда может создать подборку с понятным названием и коротким объяснением, если в ней регулярно есть товары. Сортировка по цене меняет порядок списка без необходимости превращать каждый вариант в посадочную.

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

Проверь работу редактора каталога. Он должен добавить новую куртку, заполнить свойства по справочнику и увидеть её в нужном разделе без помощи разработчика. Если поле обязательное, подскажи, почему и где оно используется. Если у товара нет размера или описание пока неполное, реши, будет ли он публиковаться. Эта сторона важна не меньше красивого внешнего вида, потому что каталог живёт после запуска.

Что проверить до передачи в разработку

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

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