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

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

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

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

Знакомство с Liquid – языком шаблонов Shopify
Пример типичного шаблона product.liquid в SublimeText2 с подсветкой синтаксиса Liquid

Как работает 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 – языком шаблонов Shopify

Логика

Заглушки для вывода в 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="" />

Знакомство с Liquid – языком шаблонов Shopify
На веб-сайте Pure Fix Cycles циклы используются для вывода нескольких вариаций товара

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

Фильтры

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

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

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

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

Знакомство с Liquid – языком шаблонов Shopify В шпаргалке Марка приведены все доступные фильтры в Liquid

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

{{ '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" type="text/css" 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 .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *