Тип компонента Блок страницы каталога товаров

Что это за компонент

Блок страницы каталога товаров - это основной компонент экрана каталога.

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

• просматривать товары выбранной категории
• фильтровать ассортимент
• сортировать выдачу
• быстро переходить в карточку товара
• добавлять товар в корзину прямо из каталога

Это не маленький промо-блок и не короткая подборка. Это основной рабочий экран каталога, через который клиент знакомится с ассортиментом компании.

Когда использовать именно этот тип

Блок страницы каталога товаров подходит, если нужно:

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

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

Как этот блок выглядит в Omnis и в клиентском приложении

Рабочая логика простая:

1. В Omnis создается компонент типа Блок страницы каталога товаров.
2. При необходимости настраивается внешний вид карточек товаров и кнопок.
3. После сохранения компонент размещается на странице каталога.
4. В клиентском приложении покупатель видит полноценный экран каталога: фильтры, сортировку, список товаров и действия по корзине.

1. Как создать компонент Блок страницы каталога товаров

Обычно сценарий такой:

1. Откройте Управление -> CMS -> Компоненты.
2. Нажмите Создать.
3. В окне выбора типа выберите Блок страницы каталога товаров.
4. Заполните название компонента.
5. При необходимости задайте код.
6. При необходимости настройте настраиваемые свойства.
7. Сохраните компонент.
8. Разместите его на странице каталога.

2. Основные поля карточки

Сверху у Блока страницы каталога товаров используются стандартные поля CMS-компонента.

ID

Это внутренний идентификатор записи. В обычной работе он нужен редко.

Тип

Для этого документа тип всегда будет Блок страницы каталога товаров.

Он определяет:

• состав полей компонента
• внешний вид экрана каталога
• набор собственных настраиваемых свойств

Код

Это служебный код компонента.

Если код не заполнен вручную, система обычно формирует его сама после сохранения.

Наименование

Это рабочее название компонента в Omnis.

Лучше использовать понятные названия, например:

• Основной каталог товаров
• Каталог электроники
• Каталог для раздела дома
• Главный экран каталога

Приоритет

Это служебный параметр порядка. Он помогает определить положение компонента среди других блоков страницы.

Активирован

Этот переключатель помогает:

• включать рабочий каталог
• хранить черновик
• временно скрывать экран без удаления

3. Все поля самого компонента

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

Основная логика этого компонента определяется не отдельными полями в карточке, а самим размещением компонента на странице и оформлением товарных карточек внутри каталога.

Проще говоря:

• компонент отвечает за сам экран каталога
• ассортимент, фильтры и выдача зависят от ваших товаров и структуры каталога
• внешний вид настраивается в основном через настраиваемые свойства

4. Что видит клиент на экране каталога

После открытия каталога покупатель видит не просто список товаров, а полноценный рабочий экран:

• панель фильтров
• кнопку сортировки
• быстрые кнопки подборок, если они есть
• счетчик найденных товаров
• сетку товарных карточек
• подгрузку следующих товаров при прокрутке

Верхняя панель действий

В верхней части экрана находится панель быстрых действий.

Обычно в ней есть:

• кнопка открытия фильтров
• индикатор количества активных фильтров
• кнопка сортировки
• быстрые переключатели подборок, если у товаров есть соответствующие маркеры

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

Счетчик найденных товаров

Под панелью действий клиент видит количество найденных товаров.

Это полезно, потому что покупатель сразу понимает:

• насколько широкая текущая выдача
• сработали ли фильтры
• стоит ли сузить или, наоборот, сбросить условия отбора

Если фильтры уже применены, рядом доступна кнопка Сбросить фильтры.

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

Подгрузка товаров без перелистывания страниц

Каталог работает как длинная лента товаров.

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

Если товаров много, каталог продолжает подгружать их частями по мере прокрутки.

5. Как выглядит карточка товара внутри каталога

Каждая позиция в каталоге показывается как отдельная товарная карточка.

Обычно клиент видит:

• изображение товара
• категорию
• название товара
• цену
• отметки и маркеры, если они используются
• кнопку В корзину
• кнопку добавления в избранное

Переход в карточку товара

Если покупатель нажимает на саму карточку, открывается подробная страница товара.

Это значит, что каталог работает как основной путь к детальному просмотру ассортимента.

Добавление в корзину

Кнопка В корзину позволяет добавлять товар прямо из каталога.

Если товар можно купить сразу, клиенту не нужно сначала открывать его подробную карточку.

Если у товара есть варианты, перед добавлением может открыться выбор нужного варианта.

Если товар уже лежит в корзине, кнопка меняет состояние и помогает быстрее перейти в корзину.

Избранное

У карточки есть отдельная кнопка избранного.

Она помогает клиенту:

• сохранить интересующий товар
• вернуться к нему позже
• собрать собственную подборку понравившихся позиций

6. Какие фильтры доступны клиенту

После нажатия на кнопку фильтров открывается отдельное окно фильтрации.

В нем клиент может сужать каталог по основным параметрам ассортимента.

Фильтр по цене

В каталоге доступен фильтр по цене.

Покупатель может:

• указать цену От
• указать цену До
• подвигать ползунок диапазона

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

Фильтр по брендам

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

У каждого варианта обычно показывается количество товаров, которое попадет в выдачу.

Это помогает покупателю понять, насколько полезен выбранный фильтр еще до нажатия на кнопку показа товаров.

Фильтр по вариантам

Если у товаров есть варианты, каталог может показать их как отдельные фильтры.

Например, это могут быть:

• цвет
• размер
• объем
• другие варианты выбора

Для цветовых вариантов в фильтре могут использоваться цветовые плашки, а не только текст.

Фильтр по характеристикам

Каталог может показывать и фильтрацию по характеристикам товара.

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

• материалу
• типу
• назначению
• другим коммерчески важным характеристикам

Количество и состав таких фильтров зависит от того, как заполнены товары в системе.

Кнопка показа товаров

В нижней части окна фильтров клиент видит кнопку показа товаров.

Она помогает сразу понять, сколько позиций останется после текущего выбора.

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

Если ничего не найдено

Если выбранные условия слишком сильно сузили каталог, клиент увидит сообщение Ничего не найдено.

В такой ситуации можно:

• сбросить фильтры
• расширить диапазон цены
• убрать часть выбранных брендов, вариантов или характеристик

7. Как работает сортировка

У каталога есть отдельная кнопка сортировки.

Обычно покупателю доступны варианты:

• По умолчанию
• Сначала дорогие
• Сначала дешевые

Это помогает быстро менять коммерческий сценарий просмотра:

• от стандартного порядка показа
• к просмотру премиальных позиций
• к поиску более доступных вариантов

8. Как быстрые подборки влияют на каталог

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

Например, это могут быть:

• скидки
• новинки
• хиты
• сезонные предложения
• другие подборки компании

Покупатель нажимает на такую кнопку и сразу получает более узкую выдачу внутри текущего каталога.

Это хороший способ быстро перевести клиента к коммерчески важной части ассортимента без сложной ручной фильтрации.

9. Что важно подготовить заранее, чтобы каталог выглядел хорошо

Качество этого блока зависит не только от самого компонента, но и от того, насколько аккуратно заполнены товары.

Перед публикацией каталога полезно проверить, что у товаров:

• есть хорошие изображения
• заполнены названия
• указаны цены
• выбраны корректные категории
• заполнены бренды
• заполнены варианты и характеристики, если они нужны для фильтрации
• настроены подборки и маркеры, если они используются в витрине

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

10. Общие настраиваемые свойства компонента

Как и у других компонентов, у Блока страницы каталога товаров действуют общие свойства блока.

Чаще всего здесь могут пригодиться:

• padding-y - внутренние отступы сверху и снизу
• padding-x - внутренние отступы слева и справа
• margin-y - внешние отступы сверху и снизу
• margin-x - внешние отступы слева и справа

Практически это помогает:

• аккуратно встроить каталог в экран
• выровнять блок относительно соседних элементов страницы
• сохранить чистый и читаемый вид витрины

11. Собственные настраиваемые свойства Блока страницы каталога товаров

У этого компонента собственные свойства в основном влияют на товарные карточки внутри каталога.

color-text-cart-btn

Это цвет текста и значка на кнопке добавления в корзину.

Он влияет на читаемость кнопки и на то, насколько заметно действие покупки внутри каталога.

color-bg-cart-btn

Это цвет фона кнопки добавления в корзину.

Если нужно сделать кнопку более заметной, обычно начинают именно с этого свойства.

round-cart-btn

Это скругление углов кнопки добавления в корзину.

Оно помогает согласовать кнопку с общим стилем витрины:

• более мягкий стиль
• более строгий стиль
• более фирменный внешний вид

height-cart-btn

Это высота кнопки добавления в корзину.

Свойство влияет на компактность карточки и на удобство нажатия.

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

size-text-cart-btn

Это размер текста на кнопке корзины.

Свойство помогает сделать кнопку:

• более заметной
• более компактной
• лучше читаемой на маленьком экране

round-product-image-frame

Это скругление области с изображением товара.

Оно влияет на общий характер карточки:

• мягкий и дружелюбный
• строгий и прямолинейный
• ближе к фирменному стилю компании

bg-product-image-frame

Это фон области с изображением товара.

Свойство особенно полезно, если:

• у изображения есть прозрачные участки
• фотография слишком светлая и теряется на фоне экрана
• нужно сделать карточки аккуратнее и ближе к фирменной палитре

В редакторе цвет можно выбрать из палитры, включая transparent.

padding-product-image-frame

Это внутренний отступ области с изображением товара.

Свойство полезно, если:

• вокруг фото нужно больше воздуха
• изображение выглядит слишком прижатым к краям
• нужно сделать карточки плотнее и компактнее

color-text-category

Это цвет строки категории внутри карточки товара.

Обычно категорию делают спокойнее, чем название товара, чтобы она не перетягивала внимание на себя.

size-text-name

Это размер названия товара в карточке.

Свойство особенно важно, если:

• у товаров длинные названия
• нужно сделать карточки визуально легче
• нужно, наоборот, усилить заметность названия

weight-text-name

Это насыщенность названия товара.

Она влияет на визуальный акцент. Более плотное начертание делает название заметнее, более легкое - спокойнее.

media-height

Это высота области изображения товара.

Свойство помогает управлять балансом карточки:

• сделать акцент на фотографии
• сделать карточку компактнее
• уравнять вид карточек с разными изображениями

image-fill

Это способ, которым изображение вписывается в область карточки товара.

На практике чаще всего используют:

• cover - изображение заполняет всю область карточки, часть краев может быть обрезана
• contain - изображение старается поместиться целиком

В редакторе также доступны готовые более точные варианты, например 55% 55%, 75% 75%, 100% auto, auto 100%, 100% 100%.

12. Практические рекомендации по настройке

Чтобы Блок страницы каталога товаров работал удобно и выглядел профессионально, полезно придерживаться нескольких правил.

Проверяйте каталог на реальных товарах

Один и тот же стиль карточки может по-разному смотреться на коротких и длинных названиях, на светлых и темных фотографиях, на товарах с большим и маленьким количеством маркеров.

Поэтому лучше проверять внешний вид не на одном товаре, а сразу на реальной выборке.

Следите за качеством данных товара

Каталог напрямую зависит от карточек товаров. Хорошо заполненные товары дают хороший каталог, а слабое заполнение быстро портит впечатление от всей витрины.

Не перегружайте карточку слишком яркой кнопкой

Кнопка В корзину должна быть заметной, но не должна спорить с названием, ценой и изображением товара.

Проверяйте фильтры после крупных изменений ассортимента

Если вы массово меняли товары, бренды, варианты или характеристики, полезно открыть каталог как клиент и проверить:

• появляются ли нужные фильтры
• корректно ли работает цена
• не пропали ли важные подборки
• соответствует ли выдача ожиданиям

Используйте этот компонент именно как основной каталог

Если на странице нужен короткий товарный блок, обычно лучше использовать Карусель товаров.

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