Пошаговые сценарии по разделу Компоненты

Для чего нужен этот документ

Этот документ нужен для практической работы. Здесь собраны типовые сценарии в формате:

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

Связанные документы по разделу:

Открывайте этот документ, если нужно:

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

Если нужен общий обзор интерфейса, вернитесь к:

Если нужен короткий ответ на точечный вопрос, открывайте:

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

1. Как создать новый текстовый или баннерный блок

Используйте этот сценарий, если:

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

Шаги

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

Что проверить после создания

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

Результат

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

Создание нового контентного компонента
На скриншоте: создание нового компонента-баннера после выбора типа и перед первым сохранением.

2. Как создать переиспользуемый баннер для нескольких экранов

Используйте этот сценарий, если:

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

Шаги

  1. Откройте каталог Компоненты.
  2. Создайте компонент типа Медиа-баннер.
  3. Дайте компоненту понятное название, например Главный баннер акции.
  4. Заполните изображение, заголовок и остальные нужные поля баннера.
  5. Сохраните компонент.
  6. Разместите этот же компонент в нужных слотах на страницах, где он должен повторяться.
  7. Проверьте результат на каждом экране.

На что обратить внимание

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

Результат

Один баннер можно поддерживать централизованно и использовать сразу в нескольких местах.

3. Как создать меню для навигации по витрине

Используйте этот сценарий, если:

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

Шаги

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

Что проверить после сохранения

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

Результат

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

Создание компонента меню
На скриншоте: карточка компонента Меню с настроенными пунктами навигации.

4. Как создать карусель товаров или торговый блок

Используйте этот сценарий, если:

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

Шаги

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

Что проверить после сохранения

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

Результат

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

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

Используйте этот сценарий, если:

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

Шаги

  1. Откройте карточку нужного компонента.
  2. Отключите Активирован.
  3. Сохраните компонент.
  4. Проверьте связанные страницы, если этот блок уже использовался на экранах.

Что важно

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

Результат

Компонент остается в CMS, но выводится из рабочей схемы.

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

Используйте этот сценарий, если:

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

Шаги

  1. Откройте карточку компонента.
  2. Сначала проверьте основной вид блока без дополнительных правок.
  3. Перейдите к дополнительным свойствам.
  4. Изменяйте только те параметры, смысл которых понятен команде.
  5. Если работаете через редактор приложения, открывайте справку рядом с полем, чтобы проверить примеры и допустимые единицы измерения.
  6. Сохраните компонент.
  7. Проверьте блок на реальном экране.
  8. При необходимости добавьте правила для разных дисплеев.

На что обратить внимание

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

Результат

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

7. Как проверить компонент перед публикацией

Используйте этот сценарий перед передачей блока в работу или перед показом владельцу компании.

Шаги

  1. Откройте карточку компонента.
  2. Проверьте Тип.
  3. Проверьте Наименование.
  4. Проверьте Активирован.
  5. Проверьте основное содержимое компонента.
  6. Проверьте, нет ли лишних временных полей, тестовых значений и чернового контента.
  7. Убедитесь, что компонент размещен на нужной странице.
  8. Откройте реальный экран в клиентском приложении или в живом предпросмотре.

Что считать успешным результатом

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