https://crystals.atlassian.net/browse/CR-9864

https://crystals.atlassian.net/browse/SRTS-1910

1.13.0

1 Описание
2 Ценность
3 Примеры работы
4 Настройки
- 4.1 Шаблонизатор
5 Список запрещенных тегов при оформлении страницы
6 Изображения из SetSync (minio)
7 Примеры и язык

Описание

Возможность самостоятельно изменять дизайн экранов Set Kiosk.

Для самостоятельного создания экранов требуются базовые знания HTML, CSS и навык верстки веб-страниц!

Ценность

Позволяет торговой сети сделать свой собственный стиль экранов прайс-чекера.

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

Примеры работы

Настройки

Шаблонизатор

Логика

Шаблоны приходят с сервера на клиент,
На клиенте шаблоны парсятся.
Валидируется содержимое шаблона, и прокидываются данные внутрь шаблона.
После шаблон вставляется в страницу.

Файлы шаблонов

Скопируйте отредактированные Файлы шаблонов в папку на сервере /opt/set-kiosk/files/screens

У файлов шаблонов зарезервированные имена:

Страница ошибки - error.sqrl
Главная страница - main.sqrl
Страница с детальной информацией о продукте - product-details.sqrl
Страница с ненайденым продуктом - product-not-found.sqrl
Страница с продуктом (Цена товара) - product-1.sqrl
Страница с продуктом (Цена товара со скидкой) - product-2.sqrl
Страница с продуктом (Цена товара по карте) - product-3.sqrl
Страница с продуктом (Дополнительная скидка по карте) - product-4.sqrl
Страница с продуктом (Цена для всех) - product-5.sqrl
Страница с продуктом (Наборная акция) - product-6.sqrl

Примеры из файлов шаблонов


Страница ошибки -
Главная страница -
Страница с детальной информацией о продукте -
Страница с ненайденым продуктом - `product-not-found.sqrl`
Страница с продуктом (Цена товара) -
Страница с продуктом (Цена товара со скидкой) -
Страница с продуктом (Цена товара по карте) -
Страница с продуктом (Дополнительная скидка по карте) -
Страница с продуктом (Цена для всех) -
Страница с продуктом (Наборная акция) -

Методика работы и редактирование

Данные для шаблонов приходят в объекте it, пример использования данных в шаблоне error.sqrl:

<img class="image" src="{{ it.imageSrc }}" alt="error" />
<div class="title">{{ it.textTitle }}</div>
<div class="subtitle">{{ it.textSubtitle }}</div>

События навешиваются на html-тэги по атрибуту data-id, значение этого атрибута является зарезервированным, пример в шаблоне product-details.sqrl:

<button data-id="BackButton" class="product-button">
  <div class="product-button__icon">
      <img src="/src/assets/img/icons/arrow-left.svg" />
  </div>
  <div class="product-button__content">
      {{ it.textBackTo }}
  </div>
</button>

Вставка изображения

Что бы подставить своё изображение, загрузите ее на сервер по пути /var/lib/jboss/set-kiosk/static/images и воспользуйтесь переменной it.imageUrl, которая приходит во все шаблоны, добавив к этой переменной название картинки вместе с расширением.

<img class="image" src="{{ it.imageUrl }}/image.png" alt="error" />

Пример указания изображений в шаблонах

Укажите название картинки из сущности IT, например - it.iconInfo (картинка на кнопке Информация о товаре).

Пример указаны в шаблонах.

Изображения находятся в папке static/assets на сервере SetKiosk. Изображения имеют специальное название. Их можно менять, но с таким же названием.

Также изображения помещаются папку static на сервере свои картинки. Например: создается внутри static папку img - static/img и туда помещаются картинки, которые планируется использовать на в визуальной части SetKiosk (формат PNG, JPG, GIF и SVG):

Пример URL-адреса:

<div class="product-button__icon">
    <img src="http://172.29.10.152:8080/img/info.svg" />
</div>

http://172.29.10.152:8080 - пример адрес до сервера Киоска

/img/info.svg - папка с файлов в static на сервере

Можно прям в SRC прописать HTTP путь до картинки, доступной из сети.

Если не найден - будет заглушка, что файла нет.

Также все картинки можно прописывать в BASE64

На примере картинки сканирования с экрана main.sqrl

data:image/png;base64 - прописывается правильно формат изображения, что переводится в BASE64.

<img class="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0e/// большое количество знаков" alt="scan" />
<div class="title">Scan product barcode</div>

Примеры синтаксисов файлов

Страница ошибки - error.sqrl

Параметр	Значение	Тип данных	Описание

Параметр	Значение	Тип данных	Описание
it.logoUrl	http://172.29.16.180:8080/api/image/logo	string	Ссылка на логотип
it.imageSrc	/assets/error_new.f14a7771.svg	string	путь до SVG изображения
it.textTitle	Инфокиоск временно недоступен	string	Заголовок
it.textSubtitle	Обратитесь к сотруднику магазина	string	Ссылка на папку с логотипами
it.logoUrl	http://172.29.16.180:8080/api/image/logo	string	Язык
it.imageUrl	http://172.29.16.180:8080/images	string	Ссылка на папку с изображениями

{
  logoUrl: string
  locale: 'en' | 'ru'
  imageSrc: string
  textTitle: string
  textSubtitle: string
  imageUrl: string
}

Главная страница (эркан сканирования) - main.sqrl

Параметр	Пример значения	Тип данных	Описание

Параметр	Пример значения	Тип данных	Описание
it.imageSrc	/assets/scan-product.a9d1a3d5.svg	string	путь до SVG изображения
it.textTitle	Просканируйте товар и узнайте его цену!	string	Заголовок
it.logoUrl	http://172.29.16.180:8080/api/image/logo	string	Ссылка на папку с логотипами
it.locale	ru	ru \| en \| kz \| uz \| tj \| kg	Язык
it.imageUrl	http://172.29.16.180:8080/images	string	Ссылка на папку с изображениями

{
  logoUrl: string
  locale: 'en' | 'ru'
  productTitle: string
  productComposition: string
  productFoodValue: string
  productProducerName: string
  productStorageConditions: string
  /**
   * Тип сертификации
   * 0 - Не указана
   * 1 - Обязательная сертификация
   * 2 - Добровольная сертификация
   * 4 - Технический регламент
   * 8 - EAC
   */
  productCertificationType: 0 | 1 | 2 | 4 | 8
  productAdditionalInfo: string
  textComposition: string
  textProducer: string
  textFoodValue: string
  textStorageConditions: string
  textAdditionalInfo: string
  textBackTo: string
  textMakeLarge: string
  textMakeSmall: string
  /**
   * Список url иконок сертификаций товара
   */
  icons: string[]
  zoomed: boolean
  imageUrl: string
}

Cтраница описания продукта - product-details.sqrl

Параметр	Пример значения	Тип данных	Описание

Параметр	Пример значения	Тип данных	Описание

Параметр	Пример значения	Тип данных	Описание

Параметр	Пример значения	Тип данных	Описание
it.logoUrl	http://172.29.16.180:8080/api/image/logo	string	Ссылка на логотип
it.locale	ru	ru \| en \| kz \| uz \| tj \| kg	Язык
it.productTitle	Сэндвич с курицей и яйцом 170г	string	Название Товара
it.productComposition	Хлеб(мука пшеничная, сахар, дрожжи, соль, молоко сухое обезжиренное), филе куриное, яйцо, майоне(масло подсолнечное, регулятор кислотностиЕ260, крахмал кукурузный, яичный желток, загустители(Е415,Е412), консерванты(Е200, Е385), ароматизатор, подсластитель, меланж, краситель; содержит источник фениаланина), салат листовой, хрен столовый(корень хрена, сахар, соль, консерванты(Е202,Е211), приправа гриль(соль,масло подсолнечное, чеснок, перец красный, паприка, сахар, ароматизаторы, регулятор кислотностиЕ330, карсители(экстракт паприки, кармин), масло растительное, соль. Дата и время изг указаны на дополнительной этикетке. Кулинарное изделие. Продукт готов к употреблению.	string	Состав товара
it.productFoodValue	Пищевая ценность на 100г.: Средние значения:: белки-5,3г, жиры-13,2г, углеводы-18,0г Энергетическая ценность: 212ккал/888кДж	string	Пищевая ценность товара
it.productProducerName	“Наша столовая”	string	Имя производтеля товара
it.productStorageConditions		string	Условие хранения товара
it.productCertificationType	null	null \| 0 \| 1 \| 2 \| 4 \| 8	Тип сертификации
it.productAdditionalInfo		string	Дополнительная информация о товаре
it.textComposition	Описание/Состав	string	Название поля "Описание/состав товара"
it.textProducer	Изготовитель	string	Название поля "Название производителя"
it.textFoodValue	Пищевая ценность	string	Название поля "Пищевая ценность"
it.textStorageConditions	Условия хранения	string	Название поля "Условия хранениня"
it.textAdditionalInfo	Дополнительная информация	string	Название страницы "Дополнительная информация"
it.textBackTo	Цены и скидки	string	Название кнопки возврата на экран отображения товара и цен
it.textMakeLarge	Показать крупно	string	Кнопка с текстом, чтобы сделать крупнее
it.textMakeSmall	Сделать мельче	string	Кнопка с текстом, чтобы сделать мельче
it.iconArrowLeft	/assets/arrow-left.26ba8b3e.svg	string	Путь до SVG изображения стрелки влево
it.iconGlasses	/assets/glasses.262016c4.svg	string	Путь до SVG изображения очков
it.icons		string	Список url иконок сертификаций товара
it.zoomed	false	boolean	это состояния зума - крупно или мельче. Если true, то показывать кнопку сделать мельче false - показывать кнопку сделать крупно
it.imageUrl	http://172.29.16.180:8080/images	string	Ссылка на папку с изображениями

Страница с ненайденым продуктом - product-not-found.sqrl

Параметр	Пример значения	Тип данных	Описание

Параметр	Пример значения	Тип данных	Описание
it.logoUrl	http://172.29.16.180:8080/api/image/logo	string	Ссылка на логотип
it.imageSrc	/assets/not_found_food.350bae66.svg	string	путь до SVG изображения
it.textTitle	Товар не найден	string	Заголовок
it.textSubtitle	Отсканируйте другой штрих код товара или обратитесь к сотруднику магазина	string	Ссылка на папку с логотипами
it.locale	ru \| en \| kz \| uz \| tj \| kg	string	Язык
it.imageUrl	http://172.29.16.180:8080/images	string	Ссылка на папку с изображениями

  logoUrl: string
  locale: 'en' | 'ru'
  imageSrc: string
  textTitle: string
  textSubtitle: string
  imageUrl: string

Данные для всех шаблонов product-[1, 2, 3, 4, 5, 6].sqrl

Параметр	Пример значения	Тип данных	Описание

Параметр	Пример значения	Тип данных	Описание
it.logoUrl	http://172.29.16.180:8080/api/image/logo	string	Ссылка на логотип
it.locale	ru	ru \| en \| kz \| uz \| tj \| kg	Язык
it.productImageUrl	http://172.29.16.180:8080/api/image/products/410661.jpeg	string	Ссылка на изображение товара
it.noDetails	false	boolean	Показывать кнопку "Информация о товаре" или нет
it.withImage	http://172.29.16.180:8080/api/image/products/410661.jpeg	false \| it.productImageUrl	Наличие изображения, если есть, то подставляет из it.productImageUrl
it.productActionName		string	Название акционной цены
it.productTitle	Сэндвич с курицей и яйцом 170г	string

SetKiosk ◾️ Кастомизация экранов прайс-чекера