Тип компонента Мини-корзина

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

Мини-корзина - это компактный компонент, который ведет клиента в корзину и показывает текущее количество товаров.

Если говорить совсем просто, это кнопка или пункт навигации, где клиент видит:

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

Такой блок нужен, чтобы клиент в любой момент мог быстро перейти к оформлению своих выбранных товаров.

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

Мини-корзина подходит, если нужно:

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

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

Как этот блок выглядит в Omnis и в mini app

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

1. В Omnis создается компонент типа Мини-корзина.
2. В карточке компонента при необходимости задается иконка.
3. После сохранения компонент размещается на нужной странице или в навигации.
4. В mini app клиент видит кнопку Корзина.
5. Если в корзине уже есть товары, рядом показывается бейдж с количеством.
6. После нажатия клиент переходит в корзину.

1. Как создать компонент Мини-корзина

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

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

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

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

ID

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

Тип

Для этого документа тип всегда будет Мини-корзина.

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

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

Код

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

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

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

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

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

• Корзина в нижнем меню
• Мини-корзина витрины
• Кнопка корзины
• Вход в корзину

Приоритет

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

Активирован

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

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

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

У Мини-корзины очень компактный набор полей.

Иконка

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

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

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

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

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

4. Что происходит после нажатия у клиента

После нажатия на Мини-корзину клиент переходит в корзину.

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

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

5. Как работает бейдж количества

У Мини-корзины есть важная практическая особенность: она может показывать количество товаров в корзине прямо на кнопке.

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

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

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

Как считается количество

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

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

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

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

Когда мини-корзина обновляется

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

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

6. Как Мини-корзина выглядит у клиента

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

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

Важно понимать:

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

Это делает Мини-корзину простым и надежным элементом навигации.

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

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

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

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

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

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

8. Собственные настраиваемые свойства Мини-корзины

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

Основной вид кнопки

• color-icon - основной цвет иконки и текста
• size-label - размер подписи Корзина

Эти свойства помогают:

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

Вид бейджа

• size-badge - размер бейджа
• text-size-badge - размер текста внутри бейджа
• bg-badge - фон бейджа
• color-badge - цвет текста бейджа
• round-badge - скругление бейджа

Эти свойства особенно важны, потому что бейдж должен быть:

• хорошо заметным
• читаемым
• аккуратным даже на маленьком экране

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

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

Используйте понятную иконку

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

Делайте бейдж заметным

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

Размещайте компонент в логичном месте

Чаще всего этот тип хорошо работает:

• в нижнем меню
• в навигационной панели
• рядом с другими основными входами разделов

Проверяйте результат на телефоне

Именно на мобильном экране лучше всего видно:

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