Знакомство с Liquid – языком шаблонов Shopify

В первой части этой серии статей я рассказывал о платформе для электронной коммерции Shopify, познакомил вас с несколькими ключевыми аспектами этой CMS, и объяснил, как устроены шаблоны Shopify. Сегодня же я хочу сосредоточить внимание на Liquid – языке шаблонов Shopify. Мы рассмотрим преимущества Liquid, узнаем, каким образом он позволяет извлекать и управлять данными магазинов.

Для чего нужен Liquid?

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

Как работает Liquid?

Как уже рассказывалось в первой статье из этой серии, Shopify определяет, какой шаблон отправлять в браузер, руководствуясь запрошенным URL.

Как только система обработает соответствующий шаблон для вывода, происходит анализ шаблона (и внешнего файла разметки) на предмет поиска заглушек Liquid. Когда соответствующие элементы найдены, Shopify заменяет код Liquid необходимыми данными вашего магазина.

Языки шаблонов также можно сравнить с функцией «Поиск и замена» в текстовых редакторах. Shopify осуществляет поиск всех заглушек Liquid и затем заменяет их данными из магазина. После чего, финальная версия документа отправляется браузеру в формате HTML.

Заглушки (Placeholders)

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

В Liquid можно выделить два типа заглушек. Первый – это двойные фигурные скобки {{ }}, которые изображают вывод, а второй тип – фигурные скобки плюс знак процента {% %}, который отражает логику.

Давайте рассмотрим небольшие примеры заглушки вывода в микрошаблоне product.liquid:

<h2>{{ product.title }}</h2>

После рендера вместо заглушки в фигурных скобках пользователь увидит заголовок просматриваемого в данный момент товара:

<h2>Keir's Coffee Cup</h2>

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

Логика и циклы

Liquid также позволяет нам контролировать, что именно отображать в шаблонах при помощи логических конструкций и циклов. К примеру, мы можем показывать разные фрагменты HTML-кода в зависимости от того, есть ли просматриваемый товар в наличии.

В Liquid также можно использовать для вывода один и тот же фрагмент кода бесконечное количество раз. К примеру, если нужно отобразить галерею изображений товара. Использование циклов позволяет при помощи всего нескольких строк кода выводить все товары, связанные с просматриваемым товаром.

Основы Liquid

Давайте рассмотрим основные составляющие языка, и постараемся понять, как их можно использовать в процессе разработки шаблонов.

Вывод

Как было отмечено выше, двойные скобки {{ }} в файле .liquid обозначают заглушку для вывода. Вот два примера, с которыми вы будете часто сталкиваться:

{{ shop.name }}
{{ product.description }}

Тег вывода позволяет извлекать определенные фрагменты данных из магазина, и отображать их в шаблоне.

Предположим, мой магазин называется «Keir's Coffee Emporium». Если бы я использовал liquid-тег {{ shop.name }}, то Shopify взял бы название моего магазина и заменил им заглушку в шаблоне.

Если бы я использовал {{ product.description }} в шаблоне product.liquid, то любой текст, введенный в редакторе конкретно для данного товара, выводился бы вместо этой самой заглушки {{ product.description }}.

Примечание: WYSIWYG-редактор выводит форматированный HTML-код, так что вам не нужно оборачивать {{ product.description }} в HTML-теги вроде и т. д.

Таким образом, можно извлечь любую переменную, будь то глобальная переменная (доступная в каждом отдельном шаблоне вашей темы оформления) или переменная на уровне шаблона (предназначенная лишь для конкретного шаблона). Например:

{{ shop.description }}
{{ product.title }}
{{ collection.title }}
{{ collection.description }}

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

Из этих примеров видно, что для доступа к данным Liquid использует синтаксис dot. Предшествующий точке элемент – это переменная, элемент после точки – это атрибут переменной:

Логика

Заглушки для вывода в Liquid позволяют извлекать и отображать данные в шаблонах, а логические теги позволяют контролировать последовательность шаблона. В отличие от тегов вывода, внедрение логических тегов в ваши шаблоны не добавит чего-то нового на страницу, но они отвечают за то, что должно быть отображено.

На простом примере хочу продемонстрировать, как использовать логику Liquid для выделения отсутствующих товаров. Подобные примеры можно найти в микрошаблонах product.liquid:

{% if product.available %}
Этот товар отсутствует
{% else %}
Извините, этот товар распродан
{% endif %}

Как видно, логический синтаксис в Liquid отличается от синтаксиса вывода. Вместо {{ }} здесь используются {% %}.

В приведенном выше примере мы контролируем, что именно будет выводиться в наш шаблон при помощи простых конструкций if, else, endif. Если ответ на наше условие if (если) будет true, то мы выводим сообщение «Этот товар есть на складе». Если ответом на выражение будет false, то шаблон выводит соответствующее оповещение {% else %}, которым в данном случае является текст «Извините, этот товар распродан».

Вы будете часто использовать выражения if при разработке шаблонов Shopify. Вот еще один пример, который поможет вам лучше понять, о чем идет речь:

{% if cart.item_count > 0 %}
<p>Товаров в вашей корзине: {{ cart.item_count }}</p>
{% else %}
<p>Ваша корзина пуста. Почему бы вам не ознакомиться с  <a href="/products">ассортиментом </a></p>
{% endif %}

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

Коротко об операторах

Вы наверняка заметили, что в этом примере мы использовали оператор >. Так как переменная cart.item_count возвращает количество товаров в корзине посетителя, мы можем проверить, является ли полученное значение больше чем 0. Если да, это значит, что в корзине есть товары.

Если в корзине есть товары, то мы можем использовать значение true и показать сообщение с количеством товаров. Если нет, то мы используем значение false, и пытаемся мотивировать посетителя начать просмотр каталога.

У вас будет доступ к множеству разных операторов в Liquid:
== равно;
!= не равно;
> больше чем;
< меньше чем;
>= больше или меньше;
<= меньше или равно;
и т. д.

{% for image in product.images %} 
<img src="{{ image | product_img_url: 'small' }}">
{% endfor %}

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

Этап 1: {% for image in product.images %}

Первая строка демонстрирует суть работы коллекций в Liquid. В отличие от коллекций товаров, которые мы рассмотрели в первой статье из этой серии, коллекции в Liquid слегка отличаются. Для примера мы решили воспользоваться product.images. Коллекцию Liquid просто вычислить: обычно она используется во множественном числе. В нашем примере мы имеем дело с Liquid-коллекцией всех изображений, связанных с просматриваемым товаром.

Еще один хороший пример - product.variants. Он возвращает объект, содержащий подробности обо всех вариациях товара, которые можно использовать в шаблоне. Если вам нужен пример вариации товаров, то мы приводили его в предыдущей статье.

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

Также следует отметить, что нам не нужно знать о том, сколько циклов должно быть запущено. После того, как не останется изображений, для которых нужно запускать цикл, Shopify займется выводом следующей части шаблона.

Этап 2: <img src="{{ image | product_img_url: 'medium' }}" />

Вторая строка кода наполовину состоит из HTML, а наполовину из Liquid. Атрибут src заполнен тегом вывода Liquid. Мы рассмотрим фильтры, выраженные здесь символом | чуть позже, но стоит отметить, что такая миниатюрная конструкция позволит заполнить атрибут src полноценным URL, указывающим на уменьшенную версию изображения.

Этап 3: {% endfor %}

Последняя строка в нашем примере – это завершающее выражение. Оно закрывает весь код, который должен быть сгенерирован в рамках текущего цикла.

Если бы у нас в объекте product.images было три изображения, то финальная версия кода вывода выглядела бы следующим образом:

<img src="//cdn.shopify.com/s/files/1/0222/9076/products/il_fullxfull.296506684_small.jpg?v=1368007899" alt="" />
<img src="//cdn.shopify.com/s/files/1/0222/9076/products/moustache-mugs_by_peter-bruegger_1_small.jpg?v=1370429684" alt="" />
<img src="//cdn.shopify.com/s/files/1/0222/9076/products/tumblr_lhr5huUxXL1qfhlb1o1_500_small.jpg?v=1370429684" alt="" />

Вывод изображений или вариаций товара – это наиболее частые случаи использования циклов.

Фильтры

Фильтры используются вместе с тегом вывода. Их задача заключается в управлении данными. Пример использования фильтра по дате:

{{ article.published_at | Дата: '%d %B %Y' }}

Без применения фильтра Shopify просто вывел бы дату, в которую была опубликована запись, в том формате, в котором она хранится в базе данных. Иногда этот формат абсолютно не читабелен для людей. Но добавив символ | и включив фильтрацию даты, мы сможем самостоятельно изменять формат.

Начинаем с фрагмента данных слева (в данном случае, это дата), и затем, используя фильтр, выводим данные в читабельном формате. Это и есть главная и единственная задача фильтров: брать данные и определенным образом изменять их:

Вот еще один пример:

{{ 'style.css' | asset_url | stylesheet_tag }}

Здесь мы используем два фильтра с общей целью: создать полноценный элемент style в нашем файле разметки.

Начинаем с названия CSS-файла слева, и сначала применяем к нему фильтр asset_url. Так как мы понятия не имеем, где в Shopify расположен необходимый нам файл style.css, нам нужно, чтобы платформа самостоятельно разобралась с нужным адресом.

Для этого и нужен фильтр asset_url. Он берет название нашего файла, style.css и составляет полноценный путь до этого файла в папке assets. Важно отметить, что он не осуществляет проверку наличия этого файла. Примерно так все будет выглядеть в итоге:

//cdn.shopify.com/s/files/1/0222/9076/assets/style.css

Второй фильтр, stylesheet_tag, берет этот URL, и оборачивает его в тег style, который позже выводится в файл разметки. Таким будет финальный результат:

<link href="//cdn.shopify.com/s/files/1/0222/9076/t/10/assets/style.css?756" rel="stylesheet"  media="all"  />

Каждый фильтр берет результат из предшествующего фильтра, а затем изменяет его по-своему. Если после него больше нет фильтров, то результат отправляется в шаблон в HTML-формате. Существует множество полезных фильтров, и вот некоторые из тех, которые вы будете использовать постоянно:

• asset_url;
• stylesheet_tag;
• script_tag;
• date;
• pluralize;
• replace;
• handle;
• money и money_with_currency;
• product_img_url;
• link_to.

Подведем итоги

В сегодняшней статье нам пришлось достаточно потрудиться. Мы познакомились с Liquid и выяснили, каким образом этот язык связан с HTML-шаблонами и файлами разметки, а также изучили четыре его ключевых аспекта: вывод, логику, циклы и фильтры. На следующем этапе мы научимся создавать бесплатный аккаунт в партнерской программе Shopify, и попробуем самостоятельно создать шаблон. Многие примеры, приведенные в моих статьях, были взяты с моего собственного шаблона для новичков, который можно скачать на GitHub.

В процессе подготовки к третьей статье из этой серии я рекомендую вам скачать мой шаблон. Процесс загрузки шаблонов досконально описывается в документации Shopify.

В финальной статье из нашей серии я продемонстрирую гибкость языка Liquid и самой платформы Shopify.