Документация Сотбит: Розница. Настройки шаблона. Внешний вид. Всплывающие уведомления

Всплывающие уведомления предназначены для визуального информирования посетителей сайта о результатах их действий: добавлении или удалении товаров из корзины, сохранении позиций в списки избранного или сравнения, а также об успешной отправке веб-форм.

Администрирование > Сотбит > Сотбит: Розница > Настройки > [id сайта]

Основные возможности всплывающих уведомлений:

Каскадное отображение (стек уведомлений) — при последовательном выполнении нескольких действий новые уведомления появляются поверх предыдущих с эффектом стопки (на экране одновременно может отображаться до двух уведомлений, не перекрывая важный контент страницы).
Интерактивные элементы — уведомления содержат прямую ссылку для перехода в корзину, кнопку закрытия и кнопку восстановления удаленного товара.
Шкала минимального заказа — вывод прогресс-бара с суммой, оставшейся до возможности оформления заказа.
Гибкая адаптивность — на экранах компьютеров доступен выбор стороны появления уведомлений, а на смартфонах и планшетах тосты автоматически позиционируются в верхней части экрана.

Настройка уведомлений в административной панели

Управление параметрами всплывающих уведомлений осуществляется в общих параметрах решения. Для перехода к настройкам откройте вкладку Внешний вид и прокрутите страницу до блока Всплывающие уведомления.

Документация Сотбит: . Всплывающие уведомления. Картинка 1

Поле	Описание
Режим отображения уведомлений	Определяет сценарии вывода всплывающих уведомлений на сайте: Умный (только Корзина и Формы) — Рекомендуется — уведомления показываются только при операциях с корзиной и отправке форм. Добавление товаров в списки избранного и сравнения происходит в фоновом режиме (с обновлением счетчиков в шапке сайта); Максимальный (все события) — уведомления отображаются при любых действиях пользователя (корзина, избранное, Сравнение товаров, веб-формы); Отключить все уведомления — полностью деактивирует показ всплывающих уведомлений на сайте.
Расположение на компьютерах	Задает позицию вывода уведомлений на мониторах компьютеров: Справа вверху (значение по умолчанию); Слева вверху; Справа внизу; Слева внизу; Вверху по центру; Внизу по центру. Поле скрывается, если в параметре Режим отображения уведомлений выбрано значение Отключить все уведомления.
Отображать название товара	Включает вывод наименования товара в расширенном уведомлении корзины. Служит управляющим параметром для полей Отображать изображение товара и Отображать цену товара.
Отображать изображение товара	Позволяет выводить миниатюру товара в уведомлении корзины. Становится недоступным для редактирования при снятом флажке Отображать название товара.
Отображать цену товара	Включает отображение актуальной стоимости единицы товара в уведомлении корзины. Становится недоступным для редактирования при снятом флажке Отображать название товара.
Отображать прогресс-бар минимальной суммы заказа	Активирует вывод прогресс-бара достижения минимального чека покупки.

Отображение фото и цены доступно только вместе с названием товара — это исключает появление уведомлений, где элементы визуально не привязаны к конкретной товарной позиции. Если флажок в поле Отображать название товара (3) снят, поля Отображать изображение товара (4) и Отображать цену товара (5) автоматически деактивируются.

Поле Отображать прогресс-бар минимальной суммы заказа (6) функционирует независимо от параметров отображения товара. Шкала выводится в уведомлении только при условии, что в настройках интернет-магазина включено и заполнено ограничение по минимальной сумме заказа.

Параметр Расположение на компьютерах (2) применяется исключительно для десктопной версии сайта. На мобильных устройствах и планшетах всплывающие уведомления всегда фиксируются вверху по центру экрана.

После внесения всех необходимых изменений нажмите кнопку Сохранить (7).

Виды уведомлений и отображение на сайте

В решении Сотбит: Розница предусмотрено два основных типа всплывающих уведомлений:

Компактные уведомления:

Применяются для быстрых событий: добавления и удаления позиций из избранного, списков Сравнения товаров (в максимальном режиме отображения) и при отправке веб-форм.
Уведомление содержит статусную иконку, заголовок события и кнопку закрытия.

Документация Сотбит: . Всплывающие уведомления. Картинка 2

Расширенные уведомления

Используются при добавлении товара в корзину и его удалении. Структура такого уведомления динамически формируется в зависимости от установленных настроек в панели управления:

Заголовок действия — содержит информационный текст и активную ссылку в корзину (1) для быстрого перехода к списку покупок.
Изображение товара (2) — миниатюра с размером 48×48 px (при удалении товара из корзины прозрачность картинки снижается до 60%).
Наименование товара (3) — название позиции (с ограничением высоты до двух строк).
Цена товара (4) — стоимость за единицу позиции.
Кнопка закрытия (5) — значок крестика для ручного скрытия тоста.
Кнопка Восстановить — отображается при удалении товара из корзины и позволяет мгновенно вернуть позицию обратно.
Прогресс-бар минимальной суммы заказа — наглядная шкала, показывающая оставшуюся сумму до порога оформления заказа.

Всплывающее уведомление о добавлении товара в корзину

Документация Сотбит: . Всплывающие уведомления. Картинка 3

Уведомление об удалении товара из корзины с кнопкой восстановления и шкалой заказа

Документация Сотбит: . Всплывающие уведомления. Картинка 4

Логика взаимодействия и таймеры автозакрытия

Стек и анимация — при последовательных действиях на экране отображается не более двух уведомлений. Новое уведомление появляется на переднем плане, а предыдущее смещается на задний план, уменьшаясь в масштабе. При закрытии верхнего уведомления фоновое плавно возвращается на передний план. При появлении третьего тоста самый ранний тост автоматически удаляется.
Клик по телу уведомления — нажатие на свободную область тоста не приводит к его случайному закрытию, позволяя пользователю спокойно прочесть текст.

Таймауты показа:

Компактные уведомления — 3 секунды;
Расширенные уведомления без шкалы заказа — 4 секунды;
Расширенные уведомления со шкалой заказа или со статусом удаления позиции — 5 секунд.
Пауза таймера — при наведении курсора мыши на область уведомления таймер обратного отсчета останавливается. После увода курсора отсчет времени запускается заново.