Раздел Компоненты
Что это за раздел
Раздел Компоненты в CMS - это каталог всех блоков, из которых собираются страницы клиентского приложения.
Если говорить совсем просто:
- приложение задает общую основу витрины
- страницы задают отдельные экраны
- слоты задают зоны на этих экранах
- компоненты задают уже конкретное содержимое, которое видит покупатель
Именно через компоненты на экранах появляются:
- тексты
- баннеры
- ссылки
- галереи
- карусели товаров
- меню
- поиск
- карта
- блок каталога
- блок карточки товара
- блок корзины
- блок оформления заказа
- блок личного кабинета
Раздел особенно важен потому, что именно компоненты превращают пустую страницу в реальный рабочий экран для:
- Telegram Mini App или Max App
- любой другой клиентской онлайн-витрины компании
Связанные документы по этому разделу:
- FAQ - частые вопросы по созданию, переиспользованию, приоритету и настройке компонентов.
- Пошаговые сценарии работы - типовые сценарии по созданию баннера, меню, каталожных и сервисных блоков.
- Проблемы и решения - типовые проблемы с отображением, типами компонентов, повторным использованием и структурой блоков.
Релевантные разделы
- Страницы - если нужно понять, куда компонент попадет на экране.
- Редактор приложений - если блок удобнее править прямо в предпросмотре.
- Поиск - если нужен клиентский поиск по каталогу.
- Блок страницы оформления заказа - если нужно управлять получением, оплатой и адресом.
- Карта с метками - если нужны карты на странице.
Как пользоваться комплектом документов
Если нужен полный обзор раздела и описание интерфейса, начинайте с этого документа.
Если нужен быстрый ответ на типовой вопрос, позже открывайте:
Если нужен готовый рабочий маршрут в формате что делать шаг за шагом, позже открывайте:
Если компонент ведет себя не так, как ожидается, или сотруднику нужно быстро разобрать проблему, позже открывайте:
Раздел Компоненты тесно связан:
- со Страницами, потому что компоненты размещаются именно внутри слотов страницы
- с Приложениями, потому что внешний вид и поведение компонентов подстраиваются под тему и структуру конкретного приложения
- с Редактором приложений, потому что там удобно сразу видеть результат настройки компонента на реальном экране
- с клиентским приложением, потому что именно компоненты чаще всего являются видимыми для покупателя блоками интерфейса
Как этот раздел связан с клиентским приложением
Для владельца компании, менеджера и контент-менеджера здесь важно понимать простую цепочку:
- В Omnis создается компонент.
- У компонента выбирается тип и заполняются его настройки.
- Затем компонент добавляется в слот на нужной странице.
- После этого покупатель видит уже готовый блок на экране клиентского приложения.
Практически это значит:
- баннер в главной витрине - это отдельный компонент
- меню в нижней навигации - это отдельный компонент
- блок поиска - это отдельный компонент
- блок карточки товара - это отдельный компонент
- блок корзины - это отдельный компонент
Поэтому раздел Компоненты отвечает не за весь экран целиком, а за конкретные блоки, из которых этот экран складывается.
Кто работает с разделом
Владелец компании
Обычно использует раздел для:
- контроля того, какие ключевые блоки уже готовы
- проверки, как оформлены главные витринные элементы
- согласования важных блоков вроде баннеров, меню, каталога и сервисных экранов
Менеджер
Обычно:
- создает новые компоненты
- выбирает тип блока
- настраивает основные поля компонента
- решает, где компонент будет использоваться
- проверяет, готов ли блок к рабочему запуску
Контент-менеджер
Обычно:
- наполняет контентные компоненты
- обновляет баннеры, тексты, галереи и ссылки
- ведет состав меню
- следит за тем, чтобы блоки выглядели единообразно в клиентской витрине
Что важно понять до начала работы
До начала работы с разделом Компоненты полезно зафиксировать несколько базовых правил.
Компонент - это переиспользуемый блок
Компонент создается как отдельная сущность CMS.
Это важно потому, что один и тот же блок можно использовать повторно, если он подходит сразу для нескольких экранов или нескольких зон.
На практике это особенно полезно для:
- повторяющихся баннеров
- одинаковых ссылок
- типовых меню
- сервисных блоков
У компонента всегда есть тип
Тип компонента определяет:
- как именно выглядит блок
- какие поля у него есть
- где его обычно используют
- как он будет вести себя в клиентском приложении
Тип выбирается в момент создания компонента. После этого обычно работают уже с настройкой самого блока, а не с заменой его типа.
Не все типы компонентов одинаковы по назначению
В CMS есть три большие группы компонентов:
- обычные контентные и навигационные блоки
- торговые блоки для витрины и каталога
- специализированные блоки для готовых клиентских экранов
У компонента есть общие поля и свои собственные настройки
У почти всех компонентов есть общая верхняя часть карточки:
- Тип
- Наименование
- Приоритет
- Активирован
Но дальше у каждого типа открываются уже свои детальные настройки.
Например:
- у баннера одни поля
- у карты другие
- у меню третьи
- у карусели товаров четвертые
Компонент сам по себе не равен странице
Компонент - это только один блок.
Чтобы покупатель увидел его на экране, компонент должен быть размещен:
- на нужной странице
- в нужном слоте
- в правильном порядке относительно других компонентов
Активность компонента - это рабочий статус блока
Переключатель Активирован помогает отделять рабочие компоненты от заготовок и временно отключенных блоков.
Также важно учитывать, что у компании может быть ограничение на количество активных компонентов. Поэтому этот переключатель имеет практический смысл, а не является только визуальной пометкой.
1. Где находится раздел и когда его открывать
Обычно путь такой:
Управление -> CMS -> Компоненты
В этот раздел обычно заходят в нескольких типовых случаях.
Когда нужно создать новый блок для страницы
Например:
- новый баннер
- новый текстовый блок
- новое меню
- новая карусель товаров
- новый блок поиска
Когда нужно отредактировать уже существующий блок
Например:
- обновить текст
- поменять изображение
- изменить состав ссылок
- поправить порядок элементов внутри компонента
- скорректировать внешний вид блока
Когда нужно переиспользовать уже готовый компонент
Это полезно, если блок уже создан и подходит еще для одной страницы или еще одной зоны интерфейса.
Когда нужно разобраться, из каких блоков собрана страница
Раздел Компоненты помогает быстро понять, какие именно блоки уже существуют в системе и какого они типа.
2. Каталог компонентов
Каталог компонентов - это основной список всех блоков CMS компании.
Он помогает:
- увидеть все компоненты сразу
- найти нужный блок по названию или коду
- отфильтровать компоненты по типу
- открыть карточку на редактирование
- создать новый компонент нужного типа
Что видно в верхней части каталога
В верхней части находятся:
- строка быстрого поиска
- кнопка выбора типа
- кнопка Создать
Поиск удобнее всего использовать по:
- названию компонента
- коду компонента
Кнопка Тип открывает выбор типа компонента и позволяет быстро сузить список только до нужной группы блоков.
Что видно в строке компонента
В строке компонента обычно видны:
- иконка типа
- название компонента
- код компонента
- признак активности
- понятное название типа
Это позволяет даже без открытия карточки быстро понять:
- что это за блок
- активен ли он
- к какому типу он относится
Как создается новый компонент
При нажатии Создать сначала открывается выбор типа компонента.
Это важный момент: в CMS сначала выбирают тип блока, а уже затем переходят к его карточке и наполнению.
3. Какие типы компонентов есть в CMS сейчас
Ниже перечислены все типы компонентов, которые доступны в текущем интерфейсе CMS.
По каждому типу компонента в папке docs/app/cms/components/type есть отдельный документ.
Контентные и промо-компоненты
- Текстовый блок
- Медиа-баннер
- Ссылка
- Галерея-слайдер
- Прайс-лист
- Карусель товаров
- Карта с метками
- Окно оформления заявки
Навигационные и сервисные компоненты
Компоненты для готовых клиентских экранов
- Блок страницы каталога товаров
- Блок страницы карточки товара
- Блок страницы корзины
- Блок страницы оформления заказа
- Блок страницы личного кабинета
Как понимать разницу между этими группами
Контентные и промо-компоненты чаще всего используют для свободной сборки экранов.
Навигационные и сервисные компоненты помогают клиенту перемещаться по приложению и выполнять ключевые действия.
Компоненты для готовых клиентских экранов обычно завязаны на конкретный бизнес-сценарий:
- просмотр каталога
- просмотр карточки товара
- работа с корзиной
- оформление заказа
- работа с личным кабинетом
4. Карточка компонента
Карточка компонента - это основной экран настройки конкретного блока.
Тип
Это тип блока, который был выбран при создании компонента.
Практически важно помнить:
- тип выбирают в самом начале
- тип определяет весь набор доступных настроек
- дальше обычно редактируют уже сам блок, а не его тип
Наименование
Это рабочее имя компонента в CMS. Его лучше делать понятным для команды.
Хорошие примеры:
- Главный баннер
- Меню витрины
- Поиск в каталоге
- Карусель новинок
- Блок корзины
Приоритет
Это служебный параметр порядка. Он особенно важен, когда компонент участвует в общей очередности отображения внутри слота.
Активирован
Переключатель помогает:
- включать рабочий блок
- держать черновики
- временно отключать компонент без удаления карточки
5. Настройки конкретного типа компонента
После выбора типа в карточке появляется блок Настройки компонента.
Именно здесь находится основная логика конкретного типа блока.
Например:
- у текстового блока здесь будут поля текста
- у баннера - медиа и связанные настройки
- у галереи - слайды
- у меню - пункты навигации
- у карты - метки и область карты
- у карусели товаров - список товаров
У части компонентов есть вложенные элементы, которые тоже редактируются прямо из карточки.
Например:
- слайды галереи
- строки прайс-листа
- метки карты
- пункты меню
- элементы карусели товаров
6. Дополнительные свойства компонента
Ниже основной настройки в карточке есть блок дополнительных свойств компонента.
Он нужен для точечной настройки внешнего вида блока без создания отдельного нового типа компонента.
Практически через этот блок обычно управляют:
- внутренними отступами
- внешними полями
- дополнительными параметрами конкретного блока
Также здесь есть раздел правил для разных дисплеев.
Он нужен, если один и тот же компонент должен выглядеть по-разному:
- на узком экране
- на среднем экране
- на большом экране
Это особенно полезно для:
- баннеров
- галерей
- каруселей
- сложных контентных блоков
Важно: этот блок нужен для точной настройки. Если вы не уверены, что именно нужно менять, лучше сначала проверить базовый вид компонента без лишних ручных правок.
В редакторе приложения у настраиваемых свойств есть дополнительные подсказки: рядом с описанием поля показывается иконка справки. Она помогает понять, какие значения можно вводить, например размеры в px или rem, цвета из палитры, прозрачность, режим отображения изображения или выравнивание текста.
7. Как компоненты связаны со страницами и слотами
Компонент не живет в CMS отдельно от остальной структуры.
Практически рабочая цепочка такая:
Приложение -> Страница -> Слот -> Компонент
Это значит:
- сначала у вас есть приложение
- внутри него есть страницы
- на страницах есть слоты
- а уже внутри слотов размещаются компоненты
Из этого следует важное правило:
если компонент настроен хорошо, но не добавлен в нужный слот нужной страницы, покупатель его на экране не увидит.
И наоборот:
если на одной странице используются не те компоненты, проблема часто находится не в самой странице, а именно в составе ее слотов.
8. Когда лучше создавать новый компонент, а когда переиспользовать существующий
Новый компонент обычно создают, если нужен действительно новый блок:
- новый баннер
- новый текстовый блок с другим содержимым
- новое меню
- новая подборка товаров
- отдельный блок для другой задачи
Существующий компонент обычно переиспользуют, если нужен тот же самый блок:
- на другой странице
- в другой зоне того же приложения
- в повторяющемся сервисном сценарии
Короткое практическое правило:
- новый смысл и новое содержимое - создаем новый компонент
- тот же самый блок в еще одном месте - сначала проверяем, можно ли переиспользовать уже существующий
9. Что особенно важно для простого пользователя
Если сотрудник работает с CMS не как разработчик, а как бизнес-пользователь, ему полезно держать в голове несколько простых правил.
Не пытайтесь сначала настраивать все параметры сразу
Сначала лучше:
- выбрать тип
- дать понятное название
- заполнить основное содержимое
- сохранить компонент
И только потом переходить к точечной настройке.
Следите за понятными названиями
Через несколько недель непонятные названия вроде баннер 2 или новый блок 5 создают путаницу.
Думайте не только про компонент, но и про экран целиком
Хороший компонент - это не только красиво настроенный блок, но и блок, который стоит на правильной странице, в правильном слоте и в правильном порядке.
Проверяйте результат на реальном экране
После важных изменений полезно смотреть не только на карточку компонента, но и на то, как этот блок реально выглядит в клиентском приложении.
Итог
Раздел Компоненты в CMS - это место, где компания управляет всеми блоками клиентской витрины.
Именно здесь становится понятно:
- какие блоки уже существуют
- какого они типа
- как они называются
- какие из них активны
- какие именно блоки увидит покупатель на экране
Если раздел Страницы отвечает за структуру экранов, то раздел Компоненты отвечает уже за реальное наполнение этих экранов.