Liquid представляет собой язык шаблонов, созданный в рамках проекта Shopify и написан на базе языка Ruby. Теперь он доступен как проект с открытым исходным кодом на GitHub и используется многими различными проектами и компаниями программного обеспечения. Liquid является основой всех тем JKassa и используется для загрузки динамического контента на страницы интернет-магазинов.

 

 

Что такое язык шаблонов?

Дизайнеры и разработчики сайтов могут использовать язык шаблонов для создания веб-страниц, которые объединяют статический контент, который является одним и тем же на нескольких страницах, и динамический контент, который изменяется с одной страницы на другую. Язык шаблонов позволяет повторно использовать статические элементы, которые определяют макет веб-страницы, а динамическое заполнение страницы данными из компонента и расширений JKassa. Статические элементы записываются в HTML, а динамические элементы записываются в Liquid. Элементы Liquid в файле действуют как заполнители: когда код в файле компилируется и отправляется в браузер, Liquid заменяется данными из магазина JKassa, где установлена тема.

 

 

Синтаксис языка Liquid

Как и традиционные языки программирования, Liquid имеет синтаксис, взаимодействует с переменными и включает в себя такие конструкции, как вывод и логика. Из-за его читаемого синтаксиса конструкции Liquid легко распознаются и могут отличаться от HTML двумя наборами разделителей: разделителями двойной фигурной скобки {{ }}, которые обозначают выходные данные, а фигурные скобки процентные разделители {% %}, которые обозначают логику и поток управления.

Существуют три основные особенности Liquid кода:

 

Объекты

Объекты Liquid выводят куски данных из компонента JKassa. В теме объекты обернуты в двойные фигурные скобки {{ }}, и выглядят так:

{{ product.name }}

В приведенном выше примере product является объектом, а name является свойством этого объекта. Каждый объект имеет список связанных свойств. Чтобы узнать больше о свойствах объекта product, см. ссылки Liquid.

Объект {{ product.name }} можно найти в файле темы JKassa для страницы списка продуктов. После того как код в файле компилируется и отображается на странице, выход объекта Liquid будет заголовком продукта. Например, в магазине одежды результатом может быть:

Удивительная футболка

Несмотря на то, что один и тот же шаблон используется для каждого продукта в магазине JKassa, объекты Liquid в шаблоне будут выводить разные данные в зависимости от просматриваемой страницы продукта или категории.

Чтобы узнать больше о различных объектах Liquid, которые можно использовать в шаблонах тем, см. страницу объектов Liquid.

 

Теги

Теги Liquid используются для создания логики и потока управления для шаблонов. Фигурные скобки и знаки процентов {% %} и текст, который они окружают не производят никакого видимого вывода, когда веб-страница отображается. Это позволяет назначать переменные и создавать условия или циклы, не показывая ни одну из логики Liquid на странице.

Например, вы можете использовать теги Liquid для отображения различного контента на странице продукта в зависимости от того, доступен ли продукт:

{% if product.stock %}
<h2>Цена: $99.99</h2>
{% else %}
<h2 class="sold-out">Извините, этот продукт продан.</h2>
{% endif %}

Если продукт доступен, то на выходе будет:

Цена: $99.99

Если продукт не доступен, то на выходе будет:

Извините, этот продукт продан.

В приведённом выше примере используются теги Liquid if и else, которые являются тегами управления потоком.

Теги Liquid подразделяются на разные типы:

 

Фильтры

Фильтры Liquid используются для изменения вывода чисел, строк, объектов и переменных. Они помещаются в выходной тег {{ }} и обозначаются символом вертикальной черты |.

Простым примером является строковый фильтр capitalize:

{{ 'hello, world!' | capitalize }}

Фильтр изменяет строку путем ее капитализации. Выход будет:

Hello, world!

На одном выходе могут использоваться несколько фильтров, и они применяются слева направо:

{{ 'hello, world!' | capitalize | remove: "world" }}

The string is first capitalized, and then the word world is removed. The output will be:

Hello, !

Вы можете использовать фильтры Liquid для создания большого количества полезных манипуляций с данными. Они подразделяются на 8 типов: