Функционал JS. JS-шаблонизатор

Одним из важных нововведений в каркасе является внедрение js-шаблонизатора.

Его задача - генерация динамических блоков после загрузки страницы, заполнение их данными.

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

Синтаксис

ECTjs предоставляет простое расширение html-верстки включением в нее управляющих структур шаблонизатора для

• вывода данных
• условий
• циклов
• вызов простых функций (helper) для обработки данных

Вывод данных

<h1><%- @title %></h1>

Условия

Циклы

helper

<%- @formatMoney discount.amount %>

Учтите, что хелперы могут принимать один входящий параметр, а на выход они могут выдавать

Данные

Представляют собой объект с данными, которые передаются в шаблонизатор.

Данный пример предоставит информацию для цикла вывода ссылок в меню.

Так же здесь представлен простой helper formatMoney, который возвращает цену, отформатированную согласно настройкам Бэк-офиса.

Шаблоны в каркасе

Все шаблоны, используемые в каркасе, разбиты по типу и располагаются в специальных файлах-сниппетах

template_cart.liquid

шаблоны для динамически изменяемых фрагментов страницы Корзины и вывода списка товаров в виджете корзины

template_modal.liquid

шаблоны модальных окон

template_product.liquid

различные шаблоны для вывода товара в динамически обновляемых коллекциях, слайдерах, списках.

template_search.liquid

шаблон списка результатов живого поиска

template_selectors.liquid

шаблоны селекторов модификаций товара

Каждый конкретный шаблон должен быть обернут в тег

Здесь class описывает к какому типу шаблонов относится данный шаблон, а id является идентификатором самого шаблона в подмножестве типа шаблонов

Это позволяет хранить шаблоны в виде дерева, где на первом уровне у нас находятся типы шаблонов, а на втором - конкретные шаблоны.

Такая конструкция тега

• предотвращает вывод всего скелета шаблона в браузер пользователя без данных
• гарантирует, что интерпретатор js не сообщит об ошибке
• шаблон будет обработан и подключен к системе в нужном порядке

Вызов

Для работы с шаблона в каркасе предусмотрены 2 функции

• InSales.Template()
• InSales.Render()

InSales.Template( class_name )

Данная функция вызывается один раз для всех шаблонов типа class_name.

Проходит по всем тегам

<script class="class_name"></script>

и прописывает их в теме.

Пример.

Вы разработали 20 шаблонов для модальных окон, каждый из них обрамлен своим тегом

<script type="text/template" class="modal" id="..."></script>

Для того, чтобы подключить их к теме, нужно после всех шаблонов прописать команду

InSales.Template( 'modal' );

В каркасе все эти манипуляции производятся в сниппете init_js.liquid.

InSales.Render( data, class_name, view )

Вызывает шаблон с идентифектором view, который относится к типу шаблонов class_name и передает в него данные data.

На выходе получаем разметку, готовую для вставки.

Пример.

Вы хотите вывести только что добавленный товар в блок на сайте.

Пусть для этой цели у нас уже есть шаблон, который подключен к теме

Далее, мы формируем данные

После чего делаем вызов

$( '#target' ).html( InSales.Render( data, 'product', 'list' ) );

Что при этом происходит

InSales.Render() находит шаблон list в группе product и передает в ECT шаблон и данные.

Вначале в шаблоне идет проверка, что в data у нас есть массив products и он не пустой.

Далее в цикле проходим по массиву products, сохраняя элемент в product. На каждой итерации дублируется вывод разметки, подставляя необходимые значения из полей url, title, first_image.

По завершению цикла ECT вернет готовую разметку со всеми данными, которую остается только вывести в нужное место.