Одним из важных нововведений в каркасе является внедрение js-шаблонизатора.
Его задача - генерация динамических блоков после загрузки страницы, заполнение их данными.
Для этих целей мы выбрали ECTjs как наиболее быстрый и легковесный из доступных аналогов, так же он позволяет хранить шаблоны в памяти, значительно облегчая работу с ними.
Синтаксис
ECTjs предоставляет простое расширение html-верстки включением в нее управляющих структур шаблонизатора для
Вывод данных
<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 является идентификатором самого шаблона в подмножестве типа шаблонов
Это позволяет хранить шаблоны в виде дерева, где на первом уровне у нас находятся типы шаблонов, а на втором - конкретные шаблоны.
Такая конструкция тега
Вызов
Для работы с шаблона в каркасе предусмотрены 2 функции
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 вернет готовую разметку со всеми данными, которую остается только вывести в нужное место.