Тип компонента Товарный баннер

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

Товарный баннер - это промо-блок для одного товара в клиентском приложении.

Он отличается от обычного Медиа-баннера тем, что берет основные данные из карточки товара:

• название
• изображение
• цену
• варианты товара
• состояние добавления в корзину

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

Как он работает

В Omnis пользователь выбирает товар и при необходимости задает отдельное изображение для баннера.

В mini app клиент видит баннер с названием товара, ценой и кнопкой добавления в корзину. Нажатие на сам баннер открывает карточку товара. Нажатие на кнопку добавляет товар в корзину по той же логике, что и товар в каталоге.

Если у товара есть варианты, mini app показывает варианты и использует стандартный выбор варианта перед добавлением в корзину.

Основные поля

Режим отображения

Определяет визуальный макет баннера.

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

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

Товар

Товар, данные которого будут показаны в баннере.

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

Изображение

Отдельная картинка для баннера.

Если поле заполнено, mini app показывает именно это изображение. Если поле не заполнено, используется изображение из товара. Если изображения нет ни в баннере, ни в товаре, отображается заглушка.

Показывать цену

Управляет выводом ценового блока.

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

Можно добавить в корзину

Управляет кнопкой добавления в корзину.

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

Надпись на кнопке

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

Если поле пустое, кнопка в баннере отображается как icon-only.

Надпись после добавления

Текст кнопки, когда товар уже находится в корзине.

Если поле пустое, кнопка в баннере отображается как icon-only.

Настраиваемые свойства

Для внешнего вида компонента доступны свойства:

• height-banner - высота баннера
• round-banner - скругление баннера
• border-banner - рамка баннера
• bg-banner - фон баннера
• bg-content-banner - фон блока с названием, ценой и кнопкой в стандартном режиме
• padding-content-banner - внутренний отступ блока с названием, ценой и кнопкой со всех сторон
• image-fill - заполнение области изображением
• bg-pos-banner - позиция изображения
• image-gradient-background - сила фоновой подсветки по цветам изображения
• image-gradient-background-transparency - прозрачность фоновой подсветки
• size-title - размер названия товара
• color-title - цвет названия товара
• size-text-btn - размер текста кнопки
• color-text-btn - цвет текста кнопки
• color-bg-btn - фон кнопки
• color-price - цвет цены
• size-price - размер цены
• round-btn - скругление кнопки
• padding-x-btn - горизонтальный отступ внутри кнопки
• padding-y-btn - вертикальный отступ внутри кнопки

По умолчанию высота баннера равна 40dvh, фон самого баннера и фон нижнего блока прозрачные, а image-fill использует contain. Если для нижнего блока нужна прозрачность, задайте ее прямо в bg-content-banner, например через color-mix.

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

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