Страница категории: фильтры, сортировка и вид списка
Обновлено
Страница категории — витрина со списком товаров: баннер, подкатегории, фильтры, сортировка, переключатель вида и сетка карточек. Всё настраивается в панели темы, раздел Каталог товаров с подразделами Категории, Подкатегории, Сайдбар и Отображение товаров. Шаблоны — shop/themes/seller2/category.html и папка html/category/.
Не путайте со статьёй «Каталог товаров» — там описана отдельная готовая страница со списком категорий магазина; здесь речь о странице конкретной категории.
Структура страницы
category.html выводит сверху вниз: микроразметку (если включена), баннер категории, мобильные фильтры (на мобильных), вывод плагинов, ссылки SEO-фильтра, панель с фильтрами и сортировкой, переключатель вида, список товаров, описание категории (если выбрано «Под списком товаров») и SEO-описание. Подкатегории выводятся выше основного контента — их подключает общий каркас site/themes/seller2/index.html.
Категории
Раздел панели: Каталог товаров → Категории.
| Настройка | Описание |
|---|---|
| Выпадающее меню в хлебных крошках | Хлебные крошки с выпадающими списками соседних категорий |
| Отображение описания категории товаров | Над списком товаров / Под списком товаров |
| Ограничить описание категории | Без ограничений или 3, 4, 5, 6, 8, 10 строк (line-clamp); обрезанное описание раскрывается кнопкой |
| Варианты сортировки товаров | JSON-настройка, см. ниже |
| Показывать переключатель вида (плитка/список/таблица) | Кнопки переключения вида списка |
| Отображение товаров по-умолчанию | Плитка / Список / Таблица |
Описание «Под списком товаров» выводится только на первой странице пагинации.
SEO-описание категории — независимый блок: при установленном SEO-плагине (shopSeoPlugin) оно выводится на первой странице всегда, независимо от того, где стоит основное описание — «Над списком» или «Под списком товаров».
Сортировка товаров
Набор вариантов сортировки — JSON-настройка Варианты сортировки товаров (catalog__categories_category_sorting_type_json). Сокращённый пример:
{
"0": {"active": true, "name": "Сначала дешевые", "template": "price_asc", "app": "block", "custom": false},
"1": {"active": true, "name": "Сначала дорогие", "template": "price_desc", "app": "block", "custom": false}
}
Поле template — ключ вида поле_направление: шаблон html/category/sorting.html разбирает его на поле сортировки и порядок (asc/desc) и строит ссылку ?sort=поле. Поле active включает вариант в выпадающий список, name — подпись для покупателя.
Двенадцать встроенных вариантов:
| Название | Ключ |
|---|---|
| Сначала дешевые / Сначала дорогие | price_asc / price_desc |
| Сначала алфавита / С конца алфавита | name_asc / name_desc |
| Популярные сначала / Непопулярные сначала | total_sales_desc / total_sales_asc |
| С высоким рейтингом / С низким рейтингом | rating_desc / rating_asc |
| Новинки / Добавлены давно | create_datetime_desc / create_datetime_asc |
| В наличии / Нет в наличии | stock_desc / stock_asc |
По умолчанию активны шесть вариантов: обе сортировки по цене и алфавиту, «Популярные сначала» и «С высоким рейтингом»; остальные включаются переключателем active.
Переключатель вида
Шаблон html/category/views.html выводит две группы кнопок: плотность плитки (3 или 4 колонки) и вид списка — Плитка / Список / Таблица. Выбор покупателя сохраняется в cookie products-view и products-view-grid; значения по умолчанию берутся из настроек Отображение товаров по-умолчанию и Количество товаров в ряду. Переключатель показывается только на десктопе и только при включённой настройке Показывать переключатель вида.
Списки товаров рендерятся шаблонами html/products/grid.html, list.html и table.html; на мобильных устройствах вид принудительно сводится к плитке.
Фильтры
Тема выводит фильтры, включённые для категории в бэкенде приложения Магазин (набор приходит в шаблон переменной $filters; поддерживаются и фильтры от плагинов). Каждый фильтр — выпадающая панель (Preline dropdown) в строке над списком товаров, форма отправляется автоматически при изменении значений, поэтому кнопка отправки на десктопе скрыта — остаётся только кнопка «Сбросить фильтры», которая появляется, когда выбран хотя бы один фильтр. Кнопка подтверждения («Показать») есть только в мобильной выезжающей панели фильтров.
Типы фильтров и их шаблоны в html/category/filters/:
| Тип | Шаблон | Как выглядит |
|---|---|---|
| Цена | price.html | Диапазон «от–до»; в Премиум-версии — выбор единицы измерения для дробных товаров |
| Диапазон | range.html | Числовой диапазон для характеристик с min/max |
| Чекбоксы | checkbox.html | Список значений с флажками (тип по умолчанию) |
| Цвет | color.html | Значения-цвета |
| Дата | date.html | Диапазон дат (тип range.date) |
| Булево | boolean.html | Три варианта: «Да», «Нет», «Любое»; по умолчанию выбрано «Любое» |
У фильтров-списков (обычных и цветовых) с более чем четырьмя значениями появляется поле поиска по значениям.
Фильтры в сайдбаре
Если в виджетах сайдбара (раздел Сайдбар) активен элемент «Фильтрация товаров» (html/sidebar/filters), горизонтальная строка фильтров над списком не выводится — фильтры переезжают в сайдбар. Если при этом выбран хотя бы один фильтр, над списком выводятся чипы по каждому активному значению и кнопка «Очистить всё».
Мобильные фильтры
На мобильных устройствах фильтры и сортировка собраны в выезжающую панель (offcanvas, html/category/mobile/filters.html): кнопка «Фильтры» открывает панель со всеми фильтрами (используются сайдбарные шаблоны html/sidebar/filters/*), закрывается свайпом или кнопкой.
Подкатегории
Раздел панели: Каталог товаров → Подкатегории.
| Настройка | Описание |
|---|---|
| Отображать подкатегории | Включить/выключить блок на страницах категорий |
| Макет отображения | Три визуальных макета (см. ниже) |
| Использовать мини-карточки на мобильных | Компактные карточки на мобильных |
| Группа изображений | Группа изображений для миниатюр (например, default, large, small) |
| Показывать количество товаров | Число товаров в каждой подкатегории |
| Ограничить вывод подкатегорий | Показывать N подкатегорий, остальные — под кнопкой «Показать ещё» |
| Горизонтальный скролл на мобильных | Прокрутка ленты подкатегорий |
Макеты те же, что у страницы каталога: categories_01 — карточки произвольной ширины; categories_02 — сетка карточек с настройками соотношения сторон, размера изображения (по умолчанию 300x300) и числа элементов в строке (4–8); categories_03 — компактные плитки с маленькими изображениями (80x80, 3–8 в строке). Настройки второго и третьего макетов появляются после выбора соответствующего макета.
Вывод можно переопределить для конкретной категории параметрами hideSubcategories / showSubcategories в дополнительных параметрах категории.
Сайдбар
Раздел панели: Каталог товаров → Сайдбар. Состав — JSON-настройка Виджеты сайдбара:
{
"0": {"active": true, "name": "Категории товаров", "template": "html/sidebar/categories/categories", "app": "shop", "custom": false, "classes": ""},
"1": {"active": true, "name": "Фильтрация товаров", "template": "html/sidebar/filters", "app": "shop", "custom": false, "classes": ""}
}
Встроенные виджеты: «Категории товаров», «Фильтрация товаров», «Теги», «Медиа-баннер». Для пользовательских блоков создайте их в приложении «Сайт — Блоки» (custom: true, в template — идентификатор блока).
Режим отображения дерева категорий — настройка «Только подкатегории»: в сайдбаре текущей категории выводятся её подкатегории, а не всё дерево.
Отображение товаров
Раздел панели: Каталог товаров → Отображение товаров — настройки карточки товара в списках.
Элементы карточки
| Настройка | Описание |
|---|---|
| Бейджи | Не отображать / Только процент скидки / Только сумму выгоды / Процент и выгоду |
| Добавление в избранное / Добавление в сравнение | Кнопки на карточке |
| Кнопка видео | Видео товара во всплывающем окне (поле видео или плагин «Видеогалерея в карточке товара») |
| Предпросмотр товара | Не отображать / По центру изображения / Снизу изображения — кнопка быстрого просмотра |
| Тип диалога товара | Расширенный / Минимальный — что открывает быстрый просмотр |
| Оценка товара | Рейтинг (звёзды) |
| Наличие товара | Индикатор наличия |
| Артикул товара | Код артикула |
| Плагин: группы товаров | Вывод плагина групп товаров |
Стили бейджей «Новинка», «Хит», «Скидка», «Выгода» и форма бейджа скидки (Текст / Круг / Звезда / Ярлык) настраиваются в блоке «Бейджи товара» — набор стилей тот же, что на странице товара (заливка/контур/мягкий/градиент).
Плитка
| Настройка | Описание |
|---|---|
| Количество товаров в ряду | 4 колонки (5 без сайдбара) / 3 колонки (4 без сайдбара) |
| Ограничение строк названия товара | 1–4 строки или без ограничений |
| Позиция бейджей | Сверху-слева / Снизу-слева |
| Место отображение избранного и сравнения | Около кнопки «В корзину» / На изображении |
| Отображение выбора артикулов | При наведении / Перед кнопкой «В корзину» |
| Изображения в края | Убирает отступы у изображений |
| Выводить видео | Видео из плагина «Видеогалерея в карточке товара» прямо в карточке |
| Режимы воспроизведения | Все / При наведении / Умный режим (одно видео за раз, переключение при наведении) |
| Серая подложка у изображений | Фон под изображением |
| Показывать характеристики | Характеристики в плитке |
Список и таблица
Для вида списком: Показывать характеристики и Показывать краткое описание. Для таблицы: Массовое добавление товаров — доступно в Премиум-версии темы.
Изображения
Соотношение сторон изображения (1:1, 3:4, 4:3, 2:1) и Дополнительные изображения у товара (нет или 1–5) — миниатюры-галерея прямо в карточке списка.
Выбор артикулов, характеристики, цены
Выбор артикулов в списках работает с плагином «Дополнительные данные товаров»: Отображать выбор артикулов, способ вывода (в ряд или списком select), точечные списки характеристик кнопками/списком — подробно в статье «Выбор артикулов в категориях».
Характеристики: Характеристики товара (нет или 1–5 штук), Отображать только эти характеристики / Исключить эти характеристики (по умолчанию исключены ya_market_link,wb_link,ozon_link).
Цены: Текст вместо нулевой цены, Показывать процент скидки, а также восемь цветовых настроек — цвет обычной цены, цены со скидкой, зачёркнутой цены и процента скидки, отдельно для светлой и тёмной темы.
Индикаторы наличия
Свои тексты вместо стандартных: Свой текст "В наличии", "Нет в наличии", "Мало товара", "Предзаказ", "По запросу" — пустое поле оставляет стандартный текст.
Кнопка «В корзину» и быстрый заказ
Отображать кнопку, Текст кнопки «В корзину», Стиль кнопки (заливка, контур, градиенты; для «Свой градиент» — CSS-переменные --btn-gradient-from, --btn-gradient-via, --btn-gradient-to), Действие при нажатии на кнопку В корзину — «Добавление в корзину» или «Переход в карточку товара». Блок «Купить в один клик»: выбор плагина («Easyweb: Быстрый заказ» или «BodySite: Купить в один клик») и стиль вывода (текст/кнопка).
Баннер категории
Над списком товаров выводится баннер (html/category/banner.html): индивидуальный для категории — через плагин «Изображения категорий» (ewshopcimg, изображения category_banner 1504×204 и category_banner_mobile 735×240, ссылка и рекламная маркировка — в параметрах категории), либо общий промо-баннер из Медиа-баннеры → Баннер в категории (промоакции создаются в Магазин → Маркетинг → Промоакции). Подробности — в статье «Изображения категорий».