Как настроить отображение элементов Nova Theme в мобильной версии¶

Тема Nova Theme адаптирована для мобильных устройств. Если вы откроете сайт на мобильных устройствах, то заметите некоторые нестандартные элементы: на витрине появится нижнее меню как в мобильных приложениях. Верхняя панель также изменится: в ней не будет логотипа и останется только самое необходимое. Это сделано специально, чтобы Nova Theme на мобильных устройствах выглядела привычнее для покупателей и была похожа на приложение.

Чтобы этого добиться, нам пришлось ограничить возможности настройки мобильного вида через менеджер блоков. Тем не менее, в CS-Cart все еще можно настроить эти мобильные элементы, или убрать их вообще.

Как изменить отображение шапки и подвала в мобильной версии?¶

Шапка и подвал на сайте состоят из следующих элементов:

Верхняя панель: Выбор языка, Выбор валюты, Быстрые ссылки, Мой профиль, Расположение пользователя (top-panel-grid-display)
Шапка: Логотип (top-logo-grid-display), Поиск, Заказать звонок, Моя корзина, Основное меню (header-grid-display)
Подвал: Подписаться, Ссылки на социальные сети, Меню подвала, Авторское право, Иконки платежных систем (footer-grid-display)

Как показать/скрыть верхнюю панель / шапку / подвал / логотип в мобильной версии¶

Для этого нужно добавить в Custom CSS или в модуль My Changes следующие CSS стили:

<details>
    <summary>Код для Custom CSS</summary>
/* Hide grids on mobile */
:root {
    /* Main menu controller */
    --ty-menus-top-panel-grid-display: none;
    --ty-menus-header-grid-display: block;
    --ty-menus-footer-grid-display: none;
    --ty-menus-top-logo-grid-display: none;

    /* Products controller */
    --ty-products-top-panel-grid-display: none;
    --ty-products-header-grid-display: none;
    --ty-products-footer-grid-display: block;
    --ty-products-top-logo-grid-display: block;

    /* Categories controller */
    --ty-categories-top-panel-grid-display: none;
    --ty-categories-footer-grid-display: block;
    --ty-categories-top-logo-grid-display: none;

    /* Checkout controller */
    --ty-checkout-top-panel-grid-display: block;
    --ty-checkout-header-grid-display: none;
    --ty-checkout-footer-grid-display: block;
    --ty-checkout-top-logo-grid-display: none;

    /* Profiles controller */
    --ty-profiles-top-panel-grid-display: block;
    --ty-profiles-header-grid-display: none;
    --ty-profiles-footer-grid-display: block;
    --ty-profiles-top-logo-grid-display: block;
}
</details>

где:

/* XXX controller */ — секция со стилями для определенного контроллера (набора однотипных страниц);
--ty-YOUR_CONTROLLER-YOUR_GRID-grid-display: YOUR_DISPLAY; — задание стилевой переменной для определенного контроллера (YOUR_CONTROLLER), блока (container/grid, YOUR_GRID) с определенным отображением (YOUR_DISPLAY);
вместо YOUR_CONTROLLER указать контроллер: menus, products, categories, checkout или profiles;
вместо YOUR_GRID указать контейнер или grid из блок менеджера: top-panel, header, footer, top-logo;
вместо YOUR_DISPLAY указать block, чтобы показать, или none, чтобы скрыть блок.

Можно указывать не все значения, а только измененные. Например, чтобы показать шапку на детальной странице товара (включая поисковую строку и логотип), можно добавить следующий Custom CSS:

/* Hide grids on mobile */
:root {
    /* Products controller */
    --ty-products-header-grid-display: block;
}

Примечание

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

Как включить отображение всех блоков / отключить изменение отображения в мобильной версии¶

Чтобы полностью отключить механизм мобильной адаптации шапки и подвала, нужно в блок менеджере удалить следующие User-defined CSS class для следующих container/grid:

Location Default: Top panel container: удалить ty-top-panel-grid-responsive.
Location Default: Header container: удалить ty-header-grid-responsive.
Location Default: Logo grid: удалить ty-top-logo-grid-responsive.
Location Default: Footer container: удалить ty-footer-grid-responsive.
Location Checkout: Logo grid: удалить ty-top-logo-grid-responsive.