Расширение мобильной навигационной панели¶

Лучшие практики¶

• Используйте мобильную навигационную панель для поддержания навигации, а не для предоставления действий. Мобильная навигационная панель позволяет покупателям перемещаться между разделами интернет-магазина, такими как Главная, Каталог, Корзина, Избранное и Профиль.
• Не добавляйте новый раздел без особой необходимости. В мобильной навигационной панели отображайте только те разделы, которым нужен частый доступ для покупателей. Помните, что проще перемещаться среди меньшего количества разделов. Рекомендуемое количество — 5 или 6 разделов. Если необходимость в новом разделе возникает редко, то стоит разместить ссылку на него на одном из существующих разделов или в блоке Быстрые ссылки.
• Используйте краткое название для заголовка раздела. Хороший заголовок раздела облегчает навигацию, четко описывая тип контента или функциональность, которые содержит раздел. По возможности используйте отдельные слова. Используйте заголовок длиной меньше 9 символов, чтобы уменьшить вероятность обрезания текста на маленьких экранах.
• Рекомендуется использовать стандартные иконки темы. Это позволить использовать визуально согласованные иконки мобильной навигационной панели.
• Используйте значок уведомленя (бейдж), чтобы ненавязчиво сообщить, что появилась новая информация. Вы можете отобразить значок уведомления (бейдж) — красный овал, содержащий белый текст или число, либо восклицательный знак — на разделе, чтобы указать, что в разделе есть новая или обновленная информация, которая требует внимания покупателя.
• Используйте выделение, чтобы указать, что раздел активен. Это поможет покупателям понять, в каком разделе они находятся.

Стандартные разделы¶

• Главная;
• Каталог;
• Корзина;
• Избранное; отображается только при установленном модуле “Отложенные товары”;
• Профиль.

Добавление нового раздела¶

Добавить новый раздел в мобильную навигационную панель можно при помощи модуля. Чтобы добавить новый раздел, нужно подключиться к хуку в шаблоне index:navbar_mobile; т. е. создать файл design/themes/nova_theme/templates/addons/YOUR_ADDON/hooks/index/navbar_mobile.post.tpl с содержимым:

{strip}
{$navbar_mobile_items = array_merge($navbar_mobile_items, [
    my_changes => [
        id => "my_changes",
        insert_before_id => "account",
        container_id => "account_info_navbar_mobile_my_changes",
        href => "my_changes.view",
        controllers => ["my_changes"],
        badge => $my_changes_navbar_mobile_badge,
        icon => "ty-icon-heart",
        custom_icon => "html source",
        text => __("my_changes.navbar_mobile.text")
    ]

])}
{* Example of a dynamic icon *}
    {if true}
        {capture name="my_changes_custom_icon" assign="my_changes_custom_icon"}
            <span class="ty-navbar-mobile__item-profile-icon">
                HI
            </span>
        {/capture}
        {$navbar_mobile_items.my_changes.custom_icon = $my_changes_custom_icon}
    {/if}

{* Export *}
{$navbar_mobile_items = $navbar_mobile_items scope=parent}
{/strip}

где:

• id (string) — идентификатор (ID) элемента (не используется для атрибута id на языке разметки HTML);
• insert_before_id / insert_after_id (string) — вставить перед / после элемента с указанным идентификатором (ID). По умолчанию доступны: homepage, menu, cart, account. Элемент wishlist доступен при установке модуля “Отложенные товары”;
• container_id (string) — (опционально) идентификатор (ID) атрибута на языке разметки HTML id контейнера. Полезен при Ajax-запросах при обновлении значка уведомлений;
• href (string) — ссылка на страницу;
• controllers (string) — список контроллеров, при которых раздел будет активным;
• badge (string) — (опционально) число или текст значка уведомлений раздела;
• icon (string) — иконка вида ty-icon-xxx. Список всех иконок можно посмотреть в таблицах стилей (CSS) design/themes/nova_theme/css/tygh/icons.less.
• custom_icon (string) — (опционально) пользовательский элемент на языке разметки HTML вместо icon. При его указании icon игнорируется. Используется, например, для отображения аватара для авторизованного пользователя.
• text (string) — текст названия раздела; не более 9 символов.

{strip}
{$wishlist_count = ""|fn_wishlist_get_count scope=parent}

{$navbar_mobile_items = array_merge($navbar_mobile_items, [
    wishlist => [
        id => "wishlist",
        insert_before_id => "account",
        container_id => "account_info_navbar_mobile_wishlist",
        href => "wishlist.view",
        controllers => ["wishlist"],
        badge => (($wishlist_count > 0) ? $wishlist_count : ""),
        icon => "ty-icon-heart",
        text => __("wishlist.navbar_mobile.text")
    ]
])}

{* Export *}
{$navbar_mobile_items = $navbar_mobile_items scope=parent}
{/strip}

Как задать соответствие новой страницы определенному разделу мобильной навигационной панели?¶

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

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

• раздел Каталог — контроллеры menus, categories, products;
• раздел Корзина — контроллеры checkout;
• раздел Отложенные товары — контроллеры wishlist;
• раздел Профиль — контроллеры profiles, auth, orders, product_features. Модули: контроллеры reward_points, vendor_communication;
• раздел Главная — все остальные контроллеры (controller).

Для того чтобы отображался активный раздел для вашей страницы, нужно создать файл design/themes/nova_theme/templates/addons/YOUR_ADDON/hooks/index/navbar_mobile.post.tpl с содержимым:

{strip}
{$navbar_mobile_items.SECTION.controllers = $navbar_mobile_items.SECTION.controllers|array_merge:["MY_CONTROLLER"]}
{$navbar_mobile_items = $navbar_mobile_items scope=parent}
{/strip}

где:

• SECTION — секция: menu, cart, account, wishlist;
• MY_CONTROLLER — ваш контроллер, при отображении которого должен быть активный раздел.

{strip}
{$navbar_mobile_items.account.controllers = $navbar_mobile_items.account.controllers|array_merge:["reward_points"]}
{$navbar_mobile_items = $navbar_mobile_items scope=parent}
{/strip}