Документация Сотбит: Розница. Настройки шаблона. Мобильная версия
Раздел Мобильная версия предназначен для гибкой настройки всех структурных компонентов мобильного интерфейса: информационной верхней панели, адаптивной шапки сайта, интерактивного главного меню с вложенным каталогом категорий и нижней фиксированной панели навигации.
Администрирование > Сотбит > Сотбит: Розница > Настройки > [id сайта]
Настройки позволяют адаптировать навигацию и внешний вид интернет-магазина под особенности любого бизнеса (B2C-розница, B2B-продажи, монобрендовые витрины) непосредственно из административной панели без привлечения веб-разработчиков.
Шапка
Раздел объединяет настройки верхней сервисной строки, адаптивной мобильной шапки и дополнительных функциональных иконок.
Основные настройки шапки
|
Поле
|
Описание
|
|
Включить мобильную шапку
|
Главный чекбокс видимости мобильной шапки. При отключении на смартфонах и планшетах не будет отображаться и выводится на страницах сайта.
|
|
Отображать верхнюю панель
|
Управляет выводом информационной панели над шапкой. Панель содержит быстрый переключатель темы оформления, город текущего региона и телефон для связи. Если опция отключена, панель не выводится, экономя полезное пространство первого экрана.
|
|
Расположение логотипа
|
Задает позицию логотипа компании в основной строке шапки:
|
|
Поиск в шапке
|
Определяет форму вывода строки поиска:
|
|
Поведение шапки при прокрутке
|
Поведение блока шапки при перемещении по странице:
|
Поле поиска поддерживает функции голосового ввода и поиска по изображению при наличии активного модуля Умный поиск. Кнопка вызова главного меню размещается в правом углу шапки, имеет удобную область нажатия и при открытии трансформируется в иконку закрытия в этой же точке экрана.
Правила компоновки и лимиты дополнительных иконок
Для обеспечения правильной верстки на мобильных устройствах действует строгая компоновочная сетка. Максимальное число выводимых дополнительных иконок в шапке зависит от выбранного расположения логотипа и варианта поиска:
|
Логотип
|
Поиск
|
Лимит иконок
|
Порядок отображения элементов в строке (слева направо)
|
|
Слева
|
В основной строке
|
1
|
Логотип → Поле поиска → Доп. иконка → Кнопка меню
|
|
Слева
|
Иконкой
|
2
|
Логотип → Иконка поиска → Доп. иконка 1 → Доп. иконка 2 → Кнопка меню
|
|
Слева
|
Под основной строкой
|
3
|
Строка 1: Логотип → Доп. иконка 1 → Доп. иконка 2 → Доп. иконка 3 → Кнопка меню
Строка 2: Поле поиска на 100% ширины экрана
|
|
Слева
|
Не отображать
|
3
|
Логотип → Доп. иконка 1 → Доп. иконка 2 → Доп. иконка 3 → Кнопка меню
|
|
По центру
|
Иконкой
|
1
|
Доп. иконка 1 → Логотип по центру → Иконка поиска → Кнопка меню
|
|
По центру
|
Под основной строкой
|
1
|
Строка 1: Доп. иконка 1 → Логотип по центру → Кнопка меню
Строка 2: Поле поиска на 100% ширины экрана
|
|
По центру
|
Не отображать
|
1
|
Доп. иконка 1 → Логотип по центру → Кнопка меню
|
|
По центру
|
В основной строке
|
—
|
Конфигурация заблокирована, так как открытый поиск и центрированный логотип не помещаются на экранах шириной 320–390 px
|
|
Не отображать
|
В основной строке
|
1
|
Поле поиска → Доп. иконка 1 → Кнопка меню
|
|
Не отображать
|
Иконкой
|
3
|
Иконка поиска → Доп. иконка 1 → Доп. иконка 2 → Доп. иконка 3 → Кнопка меню
|
|
Не отображать
|
Под основной строкой
|
3
|
Строка 1: Доп. иконка 1 → Доп. иконка 2 → Доп. иконка 3 → Кнопка меню
Строка 2: Поле поиска на 100% ширины экрана
|
|
Не отображать
|
Не отображать
|
3
|
Доп. иконка 1 → Доп. иконка 2 → Доп. иконка 3 → Кнопка меню
|
Дополнительные иконки шапки
Таблица позволяет настроить до 3 быстрых ссылок (Корзина, Избранное, Сравнение, Личный кабинет и др.):
-
Для изменения позиции зажмите маркер с точками в левой части строки и переместите иконку выше или ниже.
-
Если выбранная комбинация шапки поддерживает меньше иконок, чем настроено в таблице, на сайте выводятся первые активные элементы списка в пределах лимита. Остальные строки остаются сохраненными в базе данных и автоматически отобразятся при выборе более просторной компоновки шапки.
-
Колонка Счётчик отвечает за отображение числового бейджа над иконкой (количество товаров в Корзине, Избранном или Сравнении). При нулевом значении бейдж автоматически скрывается.
Главное меню
Главное меню представляет собой интерактивную шторку, открывающуюся по нажатию на кнопку-гамбургер в шапке сайта.
Общие настройки главного меню
|
Поле
|
Описание
|
|
Включить главное мобильное меню
|
Активирует использование главного мобильного меню решения.
|
|
Анимация открытия
|
Выбор визуального перехода:
|
|
Отображать выбор региона
|
Выводит в самом верху меню строку с указанием текущего города и ссылкой изменения местоположения. Механизм детально описан в разделе Мультирегиональность.
|
Каталог
Кнопка каталога размещается под блоком региона и профиля, обеспечивая быстрый переход к дереву ассортимента.
|
Поле
|
Описание
|
|
Отображать каталог
|
Включает отображение кнопки перехода к товарным категориям.
|
|
Название
|
Текст на кнопке (по умолчанию: Каталог товаров).
|
|
Ссылка
|
URL-адрес каталога (по умолчанию: /catalog/).
|
|
Выделять пункт акцентным цветом
|
Заливает кнопку основным фирменным цветом сайта для фокусировки внимания покупателя.
|
Профиль и личный кабинет
Блок профиля подстраивается под состояние пользователя:
Неавторизованный пользователь: отображается блок Войти с пояснением Войдите, чтобы управлять заказами и профилем.
Авторизованный покупатель: выводятся имя пользователя, аватар, баланс баллов при подключенной Программе лояльности и число активных заказов.
|
Поле
|
Описание
|
|
Отображать блок профиля
|
Управляет выводом плашки личного кабинета в меню.
|
|
Действие при клике на блок профиля
|
Вариант поведения при тапе на блок:
|
|
Отображать переход в личный кабинет
|
Настройка отвечает за кликабельность плашки профиля на втором уровне меню. При включенной опции плашка снабжается стрелкой-шевроном и ведет на корневую страницу кабинета. При отключенной опции плашка превращается в статичную информационную карточку без шеврона и без перехода.
|
|
Ссылка
|
URL-адрес личного кабинета (по умолчанию: /personal/).
|
Быстрый доступ
Блок Быстрый доступ выводит часто используемые сервисные разделы в виде аккуратных плашек: Корзина, Избранное, Сравнение, Заказы.
Пункт Заказы отображается только для авторизованных покупателей при наличии оформленных заказов. Для каждого пункта можно переопределить название, изменить активность и включить динамический счётчик количества элементов.
Пункты меню
Блок предназначен для формирования списка ссылок на контентные разделы сайта: Бренды, Акции, Услуги, Блог, О компании, Доставка, Оплата, Контакты, Реквизиты.
Список поддерживает добавление неограниченного числа собственных ссылок. Порядок пунктов регулируется простым перетаскиванием строк мышью.
Контакты и веб-форма
В нижней части главного меню размещается блок оперативной связи:
|
Поле
|
Описание
|
|
Отображать блок контактов
|
Выводит контактные телефоны, email, физический адрес и время работы. Данные автоматически берутся из настроек решения или гео-локации текущего города при активной мультирегиональности. Подробнее в главе Страница контактов.
|
|
Отображать кнопку веб-формы
|
Включает целевую кнопку под контактными данными (например, Заказать звонок).
|
|
Веб-форма
|
Выпадающий список зарегистрированных в системе веб-форм. Выбранная форма открывается во всплывающем окне по нажатию на кнопку.
|
Социальные сети и переключатель темы
Отображать блок социальных сетей — активирует ряд круглых иконок социальных сетей (VK, Telegram, Rutube, YouTube и др.). Иконки отображаются только при наличии заполненных ссылок в параметрах сайта.
Отображать переключатель темы (светлая/темная) — выводит переключатель цветового оформления в нижней части меню. Подробнее о механике тем в разделе Темная и светлая тема оформления.
Каталог в главном меню
При нажатии на кнопку каталога шторка меню не закрывается, а плавно переключается на внутренний экран с навигацией по разделам Каталога. Пользователь может последовательно углубляться в подкатегории и возвращаться назад по кнопке с системной стрелкой.
|
Поле
|
Описание
|
|
Изображения разделов
|
Задает глубину вывода миниатюр товарных категорий:
|
|
Поведение при отсутствии изображения
|
Способ оформления разделов, у которых в инфоблоке не загружена картинка анонса:
|
|
Отображать пункт «Все товары раздела»
|
Добавляет первым пунктом списка кнопку прямого перехода в текущую общую категорию. Если чекбокс снят, кликабельным становится сам заголовок раздела в шапке меню.
|
|
Отображать количество товаров в разделах
|
Выводит числовой счетчик элементов каталога рядом с наименованием каждого подраздела.
|
|
Максимальная глубина вложенности
|
Регулирует максимальный уровень погружения по веткам категорий внутри меню (значения от 2 до 5).
|
|
Поиск по разделам
|
Добавляет строку быстрого поиска по наименованиям категорий в верхней части шторки:
|
Нижнее меню
Включение и отключение меню
Вы можете полностью управлять видимостью нижней панели на мобильных устройствах:
- Включить нижнее мобильное меню (1) — главный чекбокс, активирующий или отключающий вывод панели на смартфонах и планшетах.
Удаление всех пунктов — администратор имеет возможность удалить абсолютно все пункты из списка. Если таблица меню пуста, нижняя навигационная панель на мобильной версии сайта автоматически скрывается. Обратите внимание: Если нижняя навигационная панель полностью отключена, пользователи мобильной версии будут перемещаться по сайту стандартными способами — через бургер-меню в шапке сайта, ссылки в футере (подвале) и разделы на самих страницах.
Управление пунктами и сортировка
В решении не накладывается жестких ограничений на редактирование структуры навигации. Любой элемент в таблице может быть изменен, перемещен или безвозвратно удален.
Изменение порядка пунктов (Drag-and-Drop)
Слева от каждой строки расположен маркер перемещения (2) (иконка с вертикальными точками). Чтобы изменить порядок вывода пунктов на мобильном экране:
1. Зажмите маркер левой кнопкой мыши.
2. Перетащите строку вверх или вниз на нужную позицию в таблице.
3. Новое расположение применится на сайте сразу после сохранения настроек.
Восстановление исходных настроек
Если вы случайно удалили важные разделы или хотите вернуть стандартный вид меню, предусмотренный в решении, нажмите кнопку Восстановить по умолчанию (5).
При подтверждении сброса все кастомные пункты, созданные вами вручную, будут безвозвратно удалены. Список вернется к стандартному набору элементов, заложенному в решение.
Копирование логики через типы пунктов
Каждый пункт меню имеет параметр Тип пункта, который определяет его функциональное поведение на сайте. Вы можете выбрать один из предустановленных типов, чтобы скопировать штатную системную логику решения:
- Корзина, Избранное, Сравнение товаров, Заказы — автоматически выводят числовой счетчик количества товаров над иконкой.
- Профиль — реализует динамическую смену контента. Если пользователь не авторизован на сайте, кнопка будет иметь название Войти. После авторизации название автоматически изменится на имя пользователя.
- Ссылка — стандартный переход по указанному URL-адресу без дополнительной динамической логики.
Описание полей настроек
В таблице представлена подробная конфигурация всех выводимых кнопок панели:
|
Поле
|
Описание
|
|
Иконка
|
Изображение элемента. При создании нового пункта ему автоматически присваивается картинка-заглушка. Клик по иконке открывает модальное окно выбора графики.
|
|
Название
|
Текст подписи, отображаемый под иконкой на мобильном экране.
|
|
Ссылка
|
URL-адрес страницы перехода.
|
|
Тип пункта
|
Выпадающий список выбора системного поведения кнопки.
|
|
Активность
|
Чекбокс, отвечающий за вывод кнопки на мобильном экране.
|
|
Текст
|
Флаг, скрывающий или показывающий текстовую подпись под иконкой.
|
|
Счётчик
|
Опция включения/отключения числового индикатора. Выводится только для тех типов пунктов, где технически предусмотрен счетчик (Корзина, Избранное, Сравнение, Заказы). Для типов Ссылка или Профиль эта опция не применяется.
|
|
Удалить
|
Иконка крестика (3) для безвозвратного удаления строки из таблицы настроек.
|
Добавление пунктов и валидация при сохранении
Создание нового пункта:
1. Нажмите кнопку Добавить (4) под таблицей. В конце списка появится новая строка с назначенной по умолчанию иконкой-заглушкой.
2. Кликните на изображение-заглушку, чтобы открыть окно Выбор иконки:
- Чтобы загрузить свой файл, нажмите Добавить файл (1) (поддерживаются форматы BMP, GIF, JPEG, JPG, PNG, SVG, WEBP размером до 2 МБ).
- Чтобы выбрать готовый вариант, кликните по иконке в блоке Системные иконки (2).
- Нажмите кнопку Применить (3).
3. Укажите название пункта в поле Название и ссылку для перехода в поле Ссылка.4. Выберите нужный тип пункта из списка и сохраните изменения кнопкой Сохранить (6).
Ошибки при сохранении
При сохранении настроек система проверяет корректность заполнения полей. Если у созданного пункта не заполнено поле Название или Ссылка, изменения не запишутся в базу данных. При попытке сохранения система выведет предупреждение об ошибке:
Ошибка. Настройки не были сохранены. Не сохранено 1 пункт(ов) меню — укажите название и ссылку.
При обновлении страницы все несохраненные новые строки будут потеряны. Перед сохранением обязательно убедитесь, что все созданные пункты полностью заполнены.
Отображение на мобильных устройствах
Поведение при большом количестве пунктов:
Количество одновременно выводимых кнопок в нижнем ряду ограничено размерами мобильных экранов:
- до 5 активных пунктов включительно — все элементы отображаются в один ряд и равномерно распределяются по ширине панели.
- 6 и более активных пунктов — на панель выводятся только первые 4 элемента из таблицы настроек. Пятым элементом автоматически становится кнопка Ещё с системной иконкой. Остальные активные пункты переносятся во всплывающее меню.
Всплывающая панель Ещё
При нажатии на кнопку Ещё (2) снизу плавно выдвигается дополнительная панель, содержащая все остальные настроенные вами пункты.
Всплывающая панель закрывается при следующих действиях пользователя:
- Нажатие на кнопку закрытия в виде крестика (3).
- Клик по затемненному фону за пределами всплывающего окна.
- Смахивание (свайп) панели вниз за маркер закрытия (2) на расстояние более 30% высоты экрана.
- Поворот экрана мобильного устройства.
Контроль настроек
Вы всегда можете быстро проверить активность мобильного меню и наличие иконок у добавленных пунктов через специальный инструмент Мастер внедрения. Если панель отключена или в ней допущены ошибки заполнения, мастер отобразит соответствующее предупреждение.
