Тип компонента Страницы-вкладки
Что это за компонент
Страницы-вкладки - это компонент CMS, который показывает несколько CMS-страниц внутри одного блока клиентского приложения.
Для покупателя он выглядит как набор вкладок: название каждой вкладки берется из названия выбранной CMS-страницы, рядом с названием можно показать иконку вкладки, а содержимое вкладки собирается из слотов этой страницы.
Когда использовать именно этот тип
Страницы-вкладки подходит, если нужно:
- объединить несколько информационных страниц в один экран
- показать разные разделы контента без перехода по маршрутам
- дать клиенту переключаться между разделами свайпом
- оставить каждую вкладку отдельной CMS-страницей, чтобы ее можно было наполнять обычными слотами и компонентами
Как работает загрузка страниц
В компонент добавляется список CMS-страниц.
Порядок вкладок определяется приоритетом страниц внутри компонента:
- Вместе с компонентом клиентское приложение получает только список вкладок: идентификатор, название страницы и порядок.
- Когда клиент открывает вкладку свайпом или нажатием, приложение подгружает соответствующую CMS-страницу.
- Уже загруженная вкладка сохраняется локально и повторно не запрашивается при возврате.
Такой подход помогает не перегружать первый экран лишними данными и одинаково обрабатывает все вкладки.
Что отображается внутри вкладки
Внутри каждой вкладки показываются все слоты выбранной CMS-страницы.
Это значит, что страница внутри Страниц-вкладок настраивается так же, как обычная страница:
- у нее есть собственные слоты
- в слотах размещаются CMS-компоненты
- порядок компонентов внутри слотов сохраняется
- внешний вид компонентов управляется их обычными настройками
При этом открытие вкладки не меняет основной адрес приложения и не подменяет текущую страницу. Компонент работает как вложенная область внутри текущего экрана.
Внутри вкладок не отображаются компоненты, которые управляют основными областями приложения или отдельными системными страницами:
- вход в каталог
- мини-корзина
- мини-аккаунт
- блок страницы товара
- блок страницы корзины
- блок страницы оформления заказа
- блок страницы личного кабинета
Если внутри вкладки размещен блок страницы каталога товаров, он работает как вложенный каталог: фильтры, сортировка и пагинация хранятся внутри этой вкладки. У каждой вкладки свой независимый набор таких параметров, поэтому соседние вкладки с каталогами не перетирают состояние друг друга. Для такого сценария удобно выбрать корневую категорию в самом блоке каталога, чтобы каждая вкладка показывала свой раздел товаров если это необходимо.
Как создать компонент Страницы-вкладки
Обычно сценарий такой:
- Откройте Управление -> CMS -> Компоненты.
- Нажмите Создать.
- В окне выбора типа выберите Страницы-вкладки.
- Заполните название компонента.
- Добавьте CMS-страницы, которые должны стать вкладками.
- При необходимости задайте иконки вкладок.
- При необходимости включите фиксацию вкладок при прокрутке содержимого.
- При необходимости включите предзагрузку всех страниц.
- При необходимости настройте внешний вид списка вкладок через настраиваемые свойства.
- При необходимости поменяйте их порядок.
- Сохраните компонент.
- Разместите компонент в нужном слоте страницы.
В списке страниц можно нажать на строку страницы и перейти к ее редактированию. Перед переходом Omnis покажет подтверждение, потому что несохраненные изменения в текущем компоненте могут быть потеряны.
Что важно учитывать
Вкладка берет свое название из названия CMS-страницы.
Если нужно изменить текст вкладки, измените название соответствующей страницы.
Иконка вкладки задается в самом компоненте Страницы-вкладки для каждой добавленной страницы. Если иконка не задана, вкладка отображается только с названием.
Настройка фиксации вкладок удерживает список вкладок сверху, пока клиент прокручивает содержимое внутри блока Страницы-вкладки. Когда блок закончился и ниже пошли другие компоненты страницы, список вкладок больше не фиксируется и уходит вместе с блоком.
Настройка Предзагрузить все страницы заставляет mini app загрузить все страницы из вкладок сразу после появления компонента. Ее стоит включать, когда вкладок немного и важно, чтобы переключение между ними происходило без ожидания загрузки. Если вкладок много или внутри них тяжелый контент, лучше оставить настройку выключенной: тогда страницы будут подгружаться только при открытии нужной вкладки.
Внешний вид списка вкладок можно менять через настраиваемые свойства компонента:
- bg-tablist - фон области со вкладками
- color-tab-text - цвет текста обычной вкладки
- size-tab-text - размер текста вкладки
- color-tab-active-bg - фон активной вкладки
- color-tab-active-text - цвет текста активной вкладки
Страница, добавленная во вкладку, должна быть активной и принадлежать тому же приложению компании. Если страница отключена или недоступна клиентскому приложению, она не должна использоваться как рабочая вкладка.
Страница не должна ссылаться через Страницы-вкладки на саму себя или на страницу выше по цепочке вложенных вкладок. В клиентском приложении такие вкладки пропускаются, чтобы не создавать циклический рендер страницы внутри самой себя.