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

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

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

{
  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

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

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

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

{
  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.

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