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

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

• Используйте мобильную навигационную панель для поддержания навигации, а не для предоставления действий. Мобильная навигационная панель позволяет покупателям перемещаться между различными разделами интернет-магазина, такими как Главная, Каталог, Корзина, Избранное и Профиль.
• Не добавляйте новый раздел без особой необходимости. В мобильной навигационной панели отображайте только те разделы, которым нужен частый доступ для покупателей. Помните, что проще перемещаться среди меньшего количества разделов. Рекомендуемое количество — 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 элемента (не используется для html-атрибута id);
• insert_before_id / insert_after_id (string) — вставить перед / после элемента с указанным ID. По умолчанию доступны: homepage, menu, cart, account. Элемент wishlist доступен при установке модуля /user_guide/addons/wishlist/index;
• 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}