Публичное пространство

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

CR-9864 - Получение подробных данных проблемы… СТАТУС

SRTS-1910 - Получение подробных данных проблемы… СТАТУС

2.3.0

1.13.0

Описание

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

Ценность

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

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

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

Настройки

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

Логика

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

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

Скопируйте отредактированные Файлы шаблонов в папку на сервере /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

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

Данные для шаблонов приходят в объекте 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

Название товара

it.textDetailInfo

Информация о товаре

string

Название кнопки для перехода на экран product-details.sqrl

it.primaryPrice

[object Object]

any

Первая цена (Главная)

it.primaryPrice.primary

150

number

Рубли первой цены (первая часть цены)

it.primaryPrice.secondary

00

number

Копейки первой цены (вторая часть цены)

it.secondaryPrice

[object Object]

any

Вторая цена

it.secondaryPrice.primary

170

number

Рублим второй цены (первая часть цены)

it.secondaryPrice.secondary

99

number

Копейки второй цены (вторая часть цены)

it.thirdPrice

[object Object]

any

Третья цена

it.thirdPrice.primary

undefined

number

Рубли третьей цены (первая часть цены)

it.thirdPrice.secondary

undefined

number

Копейки третьей цены (вторая часть цены)

it.primaryName

Цена по карте

string

Название первой цены

it.secondaryName

Цена товара

string

Название второй цены

it.thirdName

undefined

string

Название третьей цены

it.discountValue

0

number

Размер скидки

it.imageUrl

http://172.29.16.180:8080/images

string

Ссылка на папку с изображениями

it.iconInfo

/assets/info.6e7bb33f.svg

string

путь до svg изображения

{
  logoUrl: string
  locale: 'en' | 'ru'
  productImageUrl: string
  noDetails: boolean
  withImage: boolean
  productActionName: string
  productTitle: string
  textDetailInfo: string
  primaryPrice: any
  secondaryPrice: any
  thirdPrice: any
  primaryName: string
  secondaryName: string
  thirdName: string
  discountValue: number
  imageUrl: string
}

Список запрещенных тегов при оформлении страницы

  • iframe

  • body

  • header

  • script

  • link

  • html

  • meta

Изображения из SetSync (minio)

SetKiosk не использует изображение загруженные через SetSync

Если ссылка на картинку напрямую не указанна в карте товара, а подключена через сервис SetSync, то она не импортируется в SetKiosk

Способ добавления url в карту товара.

Примеры и язык

Примеры шаблонов лежат в папке: templates. Расширение файла с шаблоном должно быть: .sqrl.

Путь по которому лежат шаблоны на сервере: /var/lib/jboss/set-kiosk/files/screens.

Название шаблонизатора SquirrellyJS.

Официальная документация шаблонизатора

© 1994-2024, ООО «Кристалл Сервис Интеграция».
Все права защищены..

Политика обработки персональных данных