История страницы

Данный инструмент позволяет реализовать любой дизайн интерфейса покупателя на кассе самообслуживания.

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

1. Логика работы

...

Список всех экранов, доступных для кастомизации:

• Приветствие;
• Чек;
• Каталог;
• Подытог;
• Спасибо;
• Ассистент;
• Поиск;
• СуперМаг Vision;
• standByStandBy.

Данный список может дополняться.

...

• В режиме разметки – возможно ознакомиться с выбранной в разделе Настройки разметкой для выбранного экрана;.
• В режиме редактирования – основной режим, в котором производятся все изменения в интерфейсе;.
• В режиме воспроизведения – в данном режиме возможно ознакомиться с тем, как будет работать настроенный вариант вживую.

...

Здесь отображается результат добавления/изменения/удаления элементов. В таком же виде интерфейс будет отображаться на устройстве.

5. Элементы интерфейса 

Для удобства восприятия, описание будет происходить на основе примере встроенного интерфейса с под названием "Ритейл В":

Image RemovedImage Added

Элемент может быть как глобальным, т.е. доступным к добавлению на любом экране, так и локальным, т.е. доступным на одном или нескольких экранах.

При выделении элемента в левом меню, происходит его выделение в центральной части части – и наоборот.

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

5.1. Глобальные элементы

...

5.1. Глобальные элементы

5.1.1. Контейнер

Основной элемент, позволяющий хранить в себе 1 один вложенный элемент.:

Image Modified

Настройки:

Пример: 

Image RemovedImage Added

• Функция -  – позволяет выбрать ту или иную функцию, которая будет выполняться по результату нажатия на элемент на настраиваемом экране:
  • перейти в каталог;
  • контекстный поиск;
  • перейти к экрану распознавания СуперМаг Vision;
  • перейти к подытогу;
  • перейти в меню ассистента;
  • запустить сценарий регистрации покупателя;
  • перейти в окно добавления товара по коду;
  • запустить сценарий отмены чека;
  • позвать ассистента;
  • перейти в окно добавления товара из пик-листа;
  • добавить пакет;
  • к предыдущему экрану;
  • к следующему экрану;
  • оплата;
  • служебные функции из меню ассистента:
    • открыть информацию о кассе и её статус;
    • выйти на рабочий стол;
    • обнулить весы;
    • скорректировать цену.
• Размеры -  – позволяет выбрать ширину и высоту элемента;.
• Отступы -  – позволяет выбрать значения отступов для всех вложенных элементов со всех 4-х сторон элемента.
• Радиус -  – позволяет выбрать закругления на всех 4-х углах элемента как вместе, так и по отдельности.
• Рамка -  – при активации позволяет установить рамку со всех 4-х сторон элемента как вместе, так и по отдельности.
• Цвет -  – позволяет выбрать цвет элемента из списка настроенных в разделе "Цветовая схема";.
• Тень -  – при активации позволяет выбрать:
  • значения отступов тени элемента;
  • степень рассеивания;
  • Уровень уровень прозрачности тени;
  • Цвет цвет тени из списка настроенных в разделе "Цветовая схема".
• Задний фон -  – при активации позволяет задать любое изображение в качестве заднего фона элемента со следующими настройками:
  • Источник:
    • из Библиотеки;
    • по URL.
  • URL -  – ссылка на картинку при выборе варианта Источника - "По URL"источника по URL.
  • Позиционирование:
    • справа;
    • слева;
    • сверху;
    • снизу;
    • по центру.
  • Размер картинки:
    • по размеру картинки - картинки – масштабирование происходит по наименьшей стороне элемента;
    • по размеру блока - блока – масштабирование происходит по большей стороне элемента;
    • заданный размер - размер – масштабирование можно установить вручную.
  • Раппорт -  – дублирование картинки по всей площади элемента.

5.1.2. Список

Основной элемент, позволяющий хранить в себе несколько вложенных элементов.:

Image Modified

Настройки:

Пример:

Image RemovedImage Added

• Колонка или строка -  – позволяет выбрать вариант расположения вложенных элементов.
• Позиционирование блоков -  – позволяет настроить позиционирование вложенных элементов со следующими настройками:
  • Интервал -  – позволяет выбрать расстояние между вложенными элементами.
  • Позиционирование / выравнивание -  – позволяет настроить расположение вложенных элементов в зависимости от выбранного варианта расположения (колонка или строка):
    • По по левому краю;
    • По по правому краю;
    • По по верхнему краю;
    • По по нижнему краю;
    • По по центру;
    • По по ширине.
  • Скроллинг:
    • Автоматический (auto);
    • Скрытый (hidden);
    • Видимый с полосой прокрутки (scroll);
    • Видимый без полосы прокрутки (visible).
• Отступы -  – позволяет выбрать значения отступов для всех вложенных элементов со всех 4-х сторон элемента.
• Режим пролистывания -  – при активации позволяет настроить вариант пролистывания в зависимости от настроенного скроллинга:.
• Цвет кнопок - позволяет  – позволяет выбрать цвет элемента из списка настроенных в разделе "Цветовая схема".
• Иконка "В начало" - позволяет – позволяет задать любое изображение в качестве иконки "В начало":
  • Из из библиотеки;
  • По по URL.
• Иконка "В конец" - позволяет  – позволяет задать любое изображение в качестве иконки "В конец":
  • Из из библиотеки;
  • По по URL.

5.1.3. Текст

Основной элемент, позволяющий добавить текст.:

Image Modified

Настройки:

Пример:Image Removed

Image Added

• Якорь
  text text

  Текст -  – позволяет (по нажатию на троеточие):
  • выбрать текст из списка заготовленных;
  • изменить текст на другой (по нажатию на значок "Карандаша" редактирования (редактированиекарандаш) напротив того или иного текста):
    Image RemovedImage Added
    
• Стили -  – позволяет выбрать стиль текста элемента.
• Размеры -  – позволяет выбрать размер текста элемента (недоступен при выбранном Стилеcтиле).
• Высота строки -  – позволяет выбрать высоту строки текста элемента.
• Цвет -  – позволяет выбрать цвет элемента из списка настроенных в разделе "Цветовая схема";.
• Жирность -  – позволяет выбрать степень жирности элемента.
• Выравнивание -  – позволяет установить выравнивание текста относительно элемента, в котором он находится.
• Кёрнинг -  – позволяет выбрать расстояние между буквами элемента.
• Прозрачность -  – позволяет установить степень прозрачности элемента.
• Курсив - при Курсив – при активации делает текст элемента курсивным.
• Верхний регистр -  – при активации изменяет все буквы элемента на заглавные.
• Перенос строк -  – при активации позволяет указать количество строк, на которое следует переносить текст элемента, если он не умещается в элемент, в котором он находится.
• Декор -  – позволяет выбрать вариант декора текста элемента:
  • line-through - through – перечёркнутый текст;
  • underline - underline – подчёркнутый текст.

5.1.4. Кнопка

Основной элемент, позволяющий реализовать стандартный функционал кнопки.:

Image Modified

Настройки:

Пример:

Image RemovedImage Added

• Функция -  – позволяет выбрать ту или иную функцию, которая будет выполняться по результату нажатия на элемент на настраиваемом экране:
  • варианты идентичны вариантам Контейнера
  • перейти в каталог;
  • контекстный поиск;
  • перейти к экрану распознавания СуперМаг Vision;
  • перейти к подытогу;
  • перейти в меню ассистента;
  • запустить сценарий регистрации покупателя;
  • перейти в окно добавления товара по коду;
  • запустить сценарий отмены чека;
  • позвать ассистента;
  • перейти в окно добавления товара из пик-листа;
  • добавить пакет;
  • к предыдущему экрану;
  • к следующему экрану;
  • оплата;
  • служебные функции из меню ассистента:
    • открыть информацию о кассе и её статус;
    • выйти на рабочий стол;
    • обнулить весы;
    • скорректировать цену.
• Тип – Тип - позволяет выбрать тип отображения информации:
  • Только иконка - только иконка – отображение только настроенной иконки;
  • Только текст - только текст – отображение только настроенного текста;
  • Смешанный однострочный - смешанный однострочный – отображение и настроенного текста, и настроенной иконки в одну строчку;
  • Смешанный двустрочный - смешанный двустрочный – отображение и настроенного текста, и настроенной иконки в две строчки.
• Вариант -  – позволяет выбрать вариант заливки:
  • Заливказаливка;
  • Заливка заливка инверсивная;
  • Обводкаобводка.
• Цвет кнопки -  – позволяет выбрать цвет элемента из списка настроенных в разделе "Цветовая схема";.
• Размеры -  – позволяет выбрать ширину и высоту элемента;.
• Отступы -  – позволяет выбрать значения отступов для всех вложенных элементов со всех 4-х сторон элемента.
• Радиус -  – позволяет выбрать закругления на всех 4-х углах элемента как вместе, так и по отдельности.
• Тень -  – позволяет выбрать:
  • Значения значения отступов тени элемента;
  • Степень степень рассеивания;
  • Уровень уровень прозрачности тени;
  • Цвет цвет тени из списка настроенных в разделе "Цветовая схема".
• Свойства иконки -  – раздел, в котором можно настроить отображение иконки:
  • Иконка:
    • из Библиотеки
    • по URL.
  • URL -  – ссылка на картинку при выборе варианта Источника - "По URL"источника по URL.
  • Размеры -  – позволяет выбрать ширину и высоту иконки;
  • за За текстом -  – при активации переносит иконку за текст.
• Свойства текста -  – раздел, в котором можно настроить отображение текста.
  • Настройки элемента идентичны настройкам элемента "Текст" за исключенем Текст, за исключением некоторых неактуальных.

5.1.5. Разделитель

Основной элемент, позволяющий добавить декор в ту или иную часть настраиваемого экрана.:

Image Modified

Настройки:

Пример:

Image RemovedImage Added

• Тип разделителя -  – позволяет выбрать вариант отображения разделителя:
  • wave - – в виде волны;
  • dotted - dotted – в виде точек;
  • solid - solid – в виде линии.
• Цвет -  – позволяет выбрать цвет из списка настроенных в разделе "Цветовая схема";.
• Прозрачность -  – позволяет установить степень прозрачности Разделителяразделителя.

5.1.6. Статус кассы

Основной элемент, информирующий о том, в каком статусе находится касса.:

Image Modified

Настройки:

Пример:

Image RemovedImage Added

• Функция - позволяет выбрать ту или иную функцию, которая будет выполняться по результату нажатия на элемент на настраиваемом экране:
  • варианты идентичны вариантам Контейнера
• Тип - позволяет выбрать тип отображения информации:
  • Только иконка - отображение только настроенной иконки;
  • Только текст - отображение только настроенного текста;
  • Смешанный однострочный - отображение и настроенного текста, и настроенной иконки в одну строчку;
  • Смешанный двустрочный - отображение и настроенного текста, и настроенной иконки в две строчки
• Вариант - позволяет выбрать вариант заливки:
  • Заливка
  • Заливка инверсивная
  • Обводка
• Размеры - позволяет выбрать ширину и высоту элемента;
• Отступы - позволяет выбрать значения отступов для всех вложенных элементов со всех 4-х сторон элемента
• Радиус - позволяет выбрать закругления на всех 4-х углах элемента как вместе, так и по отдельности
• Тень - позволяет выбрать:
  • значения отступов тени элемента
  • степень рассеивания
  • Уровень прозрачности тени
  • Цвет тени из списка настроенных в разделе "Цветовая схема".
• Свойства иконки - раздел, в котором можно настроить отображение иконки:
  • Иконка:
    • из Библиотеки
    • по URL
  • URL - ссылка на картинку при выборе варианта Источника - "По URL"
  • Размеры - позволяет выбрать ширину и высоту иконки
  • за текстом - при активации переносит иконку за текст
• Свойства текста - раздел, в котором можно настроить отображение текста:
  • Настройки элемента идентичны настройкам элемента "Текст" за исключенем некоторых неактуальных
• Цвет кнопки - позволяет выбрать цвет элемента из списка настроенных в разделе "Цветовая схема" для состояния "Без ошибок";
• Цвет ошибки - позволяет выбрать цвет элемента из списка настроенных в разделе "Цветовая схема" для состояния "Ошибка";
• Цвет предупреждения - позволяет выбрать цвет элемента из списка настроенных в разделе "Цветовая схема" для состояния "Предупреждение".

...