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

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

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

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

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

Это главный экран знакомства с конкретной позицией. Именно здесь покупатель принимает решение, покупать товар или нет.

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

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

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

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

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

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

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

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

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

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

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

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

ID

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

Тип

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

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

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

Код

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

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

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

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

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

• Основная карточка товара
• Экран товара
• Карточка товара для mini app
• Страница товара

Приоритет

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

Активирован

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

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

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

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

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

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

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

Заголовок для опциональных товаров

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

Например, здесь можно указать:

• Можно добавить вместе
• Добавьте к заказу
• Дополнения к товару

Если у товара не выбран комплект опций или основной товар еще не добавлен в корзину, этот список не показывается.

4. Что видит клиент в верхней части карточки товара

В верхней части карточки клиент обычно видит:

• кнопку возврата в каталог или категорию товара
• кнопку Поделиться
• кнопку добавления в избранное
• название товара

Возврат в каталог

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

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

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

Избранное

Кнопка избранного помогает клиенту:

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

Если товар добавлен в избранное, состояние кнопки меняется прямо на экране карточки.

Кнопка Поделиться

Карточка товара поддерживает отправку ссылки на товар.

В зависимости от сценария клиент может:

• отправить ссылку через Telegram
• скопировать ссылку на товар

Это полезно, если товар нужно:

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

5. Галерея товара: фото и видео

Ниже верхней панели обычно располагается основная медиа-область товара.

В ней могут быть:

• главное изображение
• дополнительные изображения
• видео товара

Как работает галерея

Клиент может:

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

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

Практически это важно, потому что именно галерея формирует первое впечатление о товаре.

Если медиа не заполнены

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

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

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

6. Цена и товарные отметки

Под галереей клиент видит ценовую область товара.

Здесь обычно располагаются:

• текущая цена
• при необходимости старая цена
• скидочная отметка
• другие товарные отметки

Что влияет на цену в карточке

Карточка товара не придумывает цену сама. Она показывает те цены, которые уже настроены у товара.

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

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

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

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

Это помогает:

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

7. Варианты товара

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

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

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

Как это работает для клиента

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

Это значит, что:

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

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

8. Характеристики товара

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

Обычно в нем показываются:

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

Как устроен этот блок

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

Клиент при необходимости раскрывает его полностью и смотрит весь список свойств.

Это полезно, потому что:

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

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

9. Описание товара

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

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

Длинное описание обычно сначала показывается в сокращенном виде.

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

Такой сценарий удобен, потому что:

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

Практический совет:

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

10. Файлы товара

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

Это могут быть:

• инструкции
• сертификаты
• спецификации
• прайс-материалы
• другие полезные документы по товару

Такой блок особенно полезен для:

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

11. Покупка и управление количеством

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

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

• кнопка Купить
• цена товара
• управление количеством, если товар уже добавлен в корзину

Как работает покупка

Если товар еще не добавлен в корзину, клиент видит кнопку Купить.

После добавления:

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

Сопутствующие позиции после добавления

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

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

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

Практически это позволяет прямо из карточки основного товара быстро добавить:

• опции
• расходники
• аксессуары
• сервисные мелочи

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

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

Это делает карточку товара полноценной точкой покупки без лишних переходов.

Если товар временно нельзя купить

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

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

Неактивная позиция в корзине

Иногда в карточке может показываться примечание, что позиция уже есть в корзине, но находится в неактивном состоянии.

Для сотрудника это сигнал проверить:

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

12. Что особенно важно заполнить в самом товаре

Так как этот компонент берет почти все содержимое из карточки товара, перед публикацией полезно проверить, что у товара:

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

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

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

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

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

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

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

• аккуратно встроить карточку товара в страницу
• выдержать единый ритм интерфейса
• сделать экран визуально чище

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

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

media-height

Это высота основной медиа-области в карточке товара.

Свойство влияет на область, где покупатель видит главное изображение товара или галерею изображений. Значение можно задавать как обычный CSS-размер, например:

• 320px
• 35dvh
• 50vh

Стандартное значение - 35dvh.

Если изображение кажется слишком крупным или слишком низким на мобильном экране, сначала настройте media-height, а затем проверьте image-fill.

image-fill

Это способ размещения изображения товара в основной медиа-области.

Если говорить проще, свойство определяет, как фотография будет занимать доступное пространство:

• аккуратно помещаться целиком
• заполнять всю область показа
• занимать область по более точному пользовательскому сценарию

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

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

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

Если не уверены, что выбрать:

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

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

option-image-fill

Это способ размещения изображения в компактном списке сопутствующих позиций.

Смысл такой же, как у image-fill, но применяется только к изображениям опций после добавления основного товара в корзину.

Обычно для таких маленьких изображений используют:

• cover, если важнее плотная аккуратная плитка
• contain, если важно не обрезать сам товар

Обычные товарные маркеры

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

Для настройки такого маркера используются свойства:

• details-marker-image-width - ширина изображения обычного маркера
• details-marker-image-height - высота изображения обычного маркера
• details-marker-image-fill - способ, которым изображение вписывается в область маркера

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

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

Скидочный маркер в ценовом блоке

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

Для него используются свойства:

• details-price-marker-image-width - ширина изображения скидочного маркера
• details-price-marker-image-height - высота изображения скидочного маркера
• details-price-marker-image-fill - способ, которым изображение скидочного маркера вписывается в свою область

Это особенно полезно, если:

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

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

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

Проверяйте карточку на реальном товаре

Лучше тестировать экран не на условном примере, а на реальном товаре с фото, ценой, описанием, характеристиками и файлами.

Так проще сразу увидеть слабые места.

Не публикуйте карточку без контента

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

Следите за качеством изображений

Именно фото и видео чаще всего формируют первое впечатление о товаре.

Проверяйте длинные описания и длинные характеристики

Особенно важно смотреть, как карточка ведет себя на мобильном экране, если у товара много текста.

Проверяйте сценарий покупки до конца

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

• товар открывается корректно
• варианты переключаются
• избранное работает
• ссылка на товар отправляется корректно
• товар добавляется в корзину
• количество изменяется без ошибок