Каталог и поиск

Каталог Slate помогает покупателю пройти от раздела магазина к нужному товару: открыть подкатегорию, выбрать фильтры, изменить сортировку и перейти к покупке. Эти возможности доступны в конфигурациях, где подключён Shop-Script. Для сайта услуг, портфолио или другой конфигурации без магазина каталог не обязателен.

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

Страница категории

Раздел «Каталог товаров → Категории» разбит на группы: «Товары в списке», «Сортировка», «Описание категории» и сообщения для пустых состояний. Страница категории одна для всех разделов магазина: над товарами — подкатегории, сбоку или сверху — фильтры, ниже — список товаров. Как выглядят подкатегории, можно задать для всего магазина или для отдельной категории.

В группе «Описание категории» поле «Где показывать» ставит описание над товарами или под ними, а «Сворачивать длинное описание» оставляет видимыми первые 4, 6 или 10 строк с кнопкой раскрытия. При переходе на следующие страницы списка описание не повторяется.

Подкатегории

В «Каталог товаров → Подкатегории» поле «Вид подкатегорий» задаёт, как показывать вложенные разделы над товарами:

• Пилюли — узкая строка названий с маленькой картинкой;
• Плитки — крупное фото категории с названием и числом товаров поверх;
• Карточки с подразделами — картинка, название и ссылки на разделы следующего уровня;
• Крупные баннеры — два-три больших фото в ряд;
• Компактные плитки — небольшая картинка по центру, название и число товаров под ней, карточка с рамкой;
• Список — строки с картинкой, удобно для длинного перечня.

Там же включаются «Число товаров у подкатегории» и «Сколько подкатегорий показывать сразу»: остальные открываются кнопкой «Показать все». У каждого вида, кроме пилюль, своя группа настроек, и в панели видна только группа выбранного вида: у «Плиток» и «Компактных плиток» — пропорции картинки (1:1, 3:4, 4:3, 2:1), её размер и число элементов в ряду; у «Карточек с подразделами» — размер картинки и карточек в ряду (2–4); у «Крупных баннеров» — пропорции, размер и баннеров в ряду (2–4); у «Списка» — размер картинки и одна или две колонки на широком экране. Картинки подкатегорий берутся из плагина «Изображения категорий»; без него подкатегории показываются без картинок. Вид подкатегорий одной категории можно задать её дополнительным параметром — см. «Глобальные и дополнительные параметры».

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

Настройте список товаров

Выберите «Вид товаров по умолчанию»: плиткой, списком или таблицей. «Переключатель вида над товарами» позволяет посетителю менять вид самостоятельно; при плитке рядом появляется выбор трёх или четырёх товаров в ряду. Исходное значение задаёт поле «Товаров в ряду». Если у страницы нет боковой колонки, настройка «Без колонки — на одну карточку в ряд больше» отдаёт освободившееся место товарам: пять в ряду вместо четырёх, четыре вместо трёх. На телефоне и планшете переключатели вида скрыты, а плитка показывает по два товара в ряду.

Фильтры над товарами, сортировка и переключатели вида стоят в одном ряду. На телефоне кнопка фильтров и сортировка стоят рядом.

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

Настройка «В виде „Таблицей“ — отметки строк и „Добавить выбранное в корзину“» позволяет отметить несколько товаров и положить их в корзину одной кнопкой. Отметить можно любой товар, который есть в наличии; у товара с выбором в строке в корзину уйдёт выбранный вариант, а у товара с окном выбора — основной.

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

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

Карточка товара в списке

Раздел «Каталог товаров → Отображение товаров» оформляет карточку товара везде, где показан список: в категории, на поиске, в избранном, сравнении и блоках товаров. Здесь включаются рейтинг, наличие, артикул, кнопки «В избранное» и «К сравнению», быстрый просмотр в окне и выбор артикула прямо в карточке. Добавление и удаление из избранного и сравнения сопровождаются одинаковой короткой анимацией кнопки; её отдельная настройка не требуется.

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

Скидку на карточке можно показать процентом, выгодой в рублях (по умолчанию — «Выгода N ₽») или обоими способами; надписи, форма и цвет бейджей настраиваются там же. Оформление бейджа — заливкой, контуром, мягким тоном (бледная подложка и текст цветом бейджа) или одним из градиентов; градиент можно выбрать и для кнопки «В корзину» в поле «Стиль кнопки». В «Мобильная версия → Каталог» бейджи на карточках можно отдельно отключить для телефона.

У товара с несколькими артикулами настройка «Цена товара с несколькими артикулами» в группе «Цены» показывает цену основного артикула или «от» самой низкой цены, например «от 132 ₽». В режиме «от» старая цена и плашки скидки основного артикула скрыты. Когда покупатель выбирает артикул в карточке, видна цена выбранного с его скидкой.

В группе «Надписи наличия» задаются тексты и пороги: «Мало» — если штук не больше заданного числа (по умолчанию 5), «Осталось N шт.» — если не больше другого (по умолчанию 2).

Если товар уже лежит в корзине, кнопка «В корзину» может превращаться в счётчик «−/+» — за это отвечает настройка «Заменять кнопку на „−/+“, если товар в корзине». Счётчик учитывает минимальное количество и шаг, заданные у товара в «Магазине». В премиум-редакции доступны дробные количества и единицы измерения: например, ткань можно добавлять по 0,5 м. При достижении доступного остатка покупатель получает сообщение.

Боковая колонка

В «Каталог товаров → Сайдбар» список «Что показывать в сайдбаре» задаёт состав и порядок колонки: «Дерево категорий», «Фильтрация товаров», «Теги товаров», «Медиа-баннер» и «Вывод других плагинов». Порядок меняется перетаскиванием, выключенные элементы не показываются. Пустой элемент — например, теги, которых нет, — не выводится, а если показывать нечего, колонки нет вовсе и товары занимают всю ширину.

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

На странице поиска по умолчанию выбран «Свой состав»: он редактируется списком «Что показывать на поиске». Чтобы использовать один состав с категориями, измените поле «Сайдбар поиска». Отдельные группы раздела задают картинки дерева категорий, группу картинок баннера, число тегов и брендов, видимых сразу. На странице избранного боковой колонки нет.

Фильтры и поиск

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

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

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

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

На телефоне фильтры открываются кнопкой «Фильтры» рядом с сортировкой. Точка на кнопке показывает, что какой-то фильтр уже выбран. Панель выезжает сбоку; список прокручивается внутри неё, а кнопки «Показать товары» и «Сбросить фильтры» всегда остаются внизу — даже в длинной категории.

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

Подключение поддерживаемых плагинов поиска и фильтров выбирается в настройках темы; сами плагины должны быть установлены и включены. С «Умным поиском» найденные категории показываются на странице поиска плашками над товарами. С «SEO-фильтром» значения характеристик на странице товара становятся ссылками на страницы фильтра, а «Часто ищут» в категории можно вывести списком или по группам. В «Умных фильтрах» недоступные значения в режиме «отключать» приглушены, зачёркнуты и не нажимаются, у цвета — крестик поверх кружка. Подробнее — в статье «Интеграции приложений и плагинов».

Для пустой категории, отсутствия результатов по фильтрам и пустого поиска предусмотрены отдельные сообщения. Их настройку описывает статья «Пустые состояния и страницы ошибок».

Проверьте результат глазами покупателя

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

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