Введение

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

Старый формат

Изначально подшаблоны записывались в отдельных файлах, в названии которых указано имя (id) подшаблона, например, kiosk-modifier-miratorg.html, kiosk-service-hesburger.html.

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

Новый формат

Все подшаблоны перечислены в скриптах киоска (код, соответствующий каждому из них, можно найти в статьях каждого подшаблона). Для их переопределения в основном шаблоне можно добавить описание подшаблона внутри парного тега template.

В версии 1.1, если нет элементов template, то будет производиться поиск следующих подшаблонов по имени файла: service, groupservice, modifier.

Информация о каждом необходимом подшаблоне записывается в теге template, имеющем следующие атрибуты:

• template-id – id (имя) подшаблона
• disabled – отключён ли подшаблон (атрибут без обязательного указания значения, если он есть, то будет браться подшаблон по умолчанию)
• external – находится ли код подшаблона в отдельном файле (атрибут без значения)

Если указан атрибут external, то код подшаблона будет взят из файла с именем kiosk-<id_подшаблона>-<id_шаблона>.html (т.е. по сути то же самое, что и было ранее, но наличие перечисления подшаблонов в основном файле позволит избежать лишних ошибок 404 – ведь подшаблоны нужны далеко не всегда, а старый метод всегда искал нужные файлы).

Если атрибут external не указан, то в качестве подшаблона будет взято содержимое тега template.

Если в списке подшаблонов есть несколько тегов template с одинаковыми template-id, то применяться будет последний из них. Чтобы избежать недоразумений, рекомендуется добавлять атрибут disabled к ненужным дубликатам подшаблонов.

Основные принципы

template-id не чувствителен к регистру.

В описании каждого подшаблона есть «Элементы для контента». Это элементы, которые выискиваются по имени класса и заполняются необходимым содержимым.

У большинства изображений (.ec-kiosk-serviceImage, .ec-kiosk-modifierImage, т.д.) можно выставить атрибут image-display="background", чтобы избражение выставлялось фоном для этого элемента, а не добавлялось к нему в качестве элемента img. Здесь, на Wiki, на страницах описания подшаблонов у контейнеров, имеющих данное свойство, стоит значок img/bg.

Контейнер для клавиатуры

На некоторых страницах подразумевается наличие клавиатуры. Например, для ввода комментария или суммы для пополнения дисконтной карты. Чтобы можно было контролировать расположение клавиатуры на экране, у большинства страниц есть выделенный контейнер для клавиатуры (например, .ec-kiosk-addBalanceByCardScreen .ec-kiosk-sumKeyboard).

Элементом, превращаемым в саму клавиатуру (с помощью jkeyboard.js), будет являться либо предустановленный подшаблоном элемент .keyboard (он должен находиться внутри контейнера клавиатуры). Если таковой отсутствует в подшаблоне, то к контейнеру (в нашем примере - к .ec-kiosk-sumKeyboard) будет добавлен новый потомок div.keyboard, который станет клавиатурой.

Двойной заголовок

На некоторых экранах имеется двойной заголовок – заголовок, в котором есть два элемента: .first – для заголовка, и .second – для подзаголовка или примечания. Им не обязательно обоим присутствовать в подшаблоне: если есть один из них, но нет другого, то тот другой добавлен не будет, и, соответственно, отображаться будет только заголовок либо подзаголовок (в зависимости от того, кто присутствует в подшаблоне - first иил second). Если же обоих элементов нет, то решение будет приниматься исходя из наличия у заголовка класса .basicScreenDoubleTitle. Если такой класс есть, то в заголовок будут вставлены span.first и span.second. В противном случае текст заголовока будет вписан в основной контейнер заголовка.

У некоторых экранов (например, экрана идентификации в системе лояльности) может встретиться тройной заголовок, а у кого-то в будущем - даже пятерной. Это значит, что для заголовка используется более двух строк. Первые две строки будут добавлены по правилам, описанным выше, а все последующие строки будут добавлены в .basicScreenDoubleTitle в span.additional. Если в заголовке строки размечены в явном виде через .first и .second, то дополнительные строки будут либо вставлены в элементы .additional (соответственно, по строке на такой элемент), либо может быть указан один элемент .additional-MARKER, на место и с использованием имени тега которого будут вставлены новые элементы .additional под каждую строку. Также, если вы по какой-то причине хотите скрыть .first и .second, но хотите показать .additional, то вы таки можете это сделать, в том числе с использованием маркера.

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

Пример