Документация Сотбит: Розница. Настройка каталога. Список товаров. Отображение списка товаров
На данной странице описаны доступные форматы вывода товаров в списке каталога, параметры их настройки по умолчанию, а также логика работы переключателя видов в публичной части сайта.
В готовом решении предусмотрено два формата представления товаров в каталоге. Это позволяет адаптировать интерфейс под особенности ассортимента интернет-магазина и предоставить пользователям выбор между визуальным изучением товаров и быстрым сравнением их технических параметров.
Варианты представления товаров
Плитка:
Классический вид отображения товаров в каталоге, используемый по умолчанию. Карточки товаров выводятся в виде прямоугольной сетки в несколько колонок.
- Назначение: Оптимально для товаров, где ключевую роль играет визуальный выбор (одежда, бытовая техника, мебель, аксессуары).
- Особенности: Крупное изображение товара (2) находится в центре внимания. Кнопки покупки и дополнительные действия отображаются под изображением или при наведении на карточку. Переключатель вида каталога (1) в этом режиме подсвечивается как активный.
Список:
Строчный формат вывода товаров, при котором каждая позиция занимает всю ширину рабочей области страницы каталога.
- Назначение: Идеально подходит для технически сложных товаров, комплектующих, расходных материалов и оборудования, где покупателю важно сразу видеть характеристики и артикулы.
- Особенности: В строке товара (2) в горизонтальный ряд выстраиваются: уменьшенное изображение, артикул, основные свойства и характеристики, доступные торговые предложения, актуальная цена и кнопки для покупки/добавления в корзину. Переключатель вида каталога (1) в этом режиме подсвечивается как активный.
Режим отображения Список разработан только для настольных компьютеров (desktop-версии сайта). При открытии каталога на планшетах (tablet) и мобильных устройствах (mobile) система автоматически переключает отображение в режим Плитка для сохранения корректного мобильного интерфейса.
Переключение режимов отображения доступно исключительно в основном каталоге товаров. В разделе Услуги данный функционал не применяется.
Настройка формата отображения по умолчанию
Администратор сайта может задать глобальный вид каталога, который будет открываться пользователю при первом переходе в разделы. Настройка выполняется в параметрах стандартного компонента каталога 1С-Битрикс.
Для установки формата отображения по умолчанию:
1. Перейдите в публичную часть сайта и включите Режим правки на верхней панели администратора.
2. Откройте любой раздел каталога товаров.
3. Наведите указатель мыши на область списка товаров. Во всплывающем меню нажмите на иконку шестеренки, чтобы открыть окно Параметры компонента.
4. В левой колонке настроек перейдите в раздел Внешний вид (1).
5. С правой стороны найдите поле Вид каталога товаров по умолчанию (2) и выберите нужный формат из выпадающего списка.
6. Нажмите кнопку Сохранить (3) в левом нижнем углу, чтобы применить настройки.
Публичная часть сайта > Режим правки > Страница Каталога > Параметры компонента
Описание параметров
|
Поле
|
Описание
|
|
Вид каталога товаров по умолчанию
|
Определяет, в каком формате (Плитка или Список) будет отображаться список товаров при первом визите пользователя на сайт.
Возможные варианты:
— Плитка (значение по умолчанию);
— Список.
|
Логика работы переключателя в публичной части
Посетители сайта могут самостоятельно менять формат вывода товаров с помощью кнопок-иконок в правой части панели сортировки каталога.
При работе переключателя соблюдаются следующие правила:
- Интерактивность: Смена внешнего вида каталога происходит мгновенно. Страница не перезагружается полностью, обновляется только рабочая область со списком товаров.
- Сохранение сессии: Выбранный пользователем формат отображения сохраняется в рамках его текущей пользовательской сессии.
Выбранный вид не сбрасывается и сохраняется при:
- переходе в другие разделы и подразделы каталога;
- переходе по страницам пагинации;
- применении фильтрации через Умный фильтр или изменении сортировки;
- возврате в список товаров после перехода в детальную карточку.
