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

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

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

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

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

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

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

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

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

Заглушки (Placeholders)

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

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

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

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

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

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

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

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

Основы Liquid

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

Вывод

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

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

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

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

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

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

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

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

Логика

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

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

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

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

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

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

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

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

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

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

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

Этап 1:

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

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

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

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

Этап 2: <img src="https://www.internet-technologies.ru/articles/%3C%3C%20image%20%7C%20product_img_url:%20'medium'%20%3E%3E" />

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

Этап 3:

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

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

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

Фильтры

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

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

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

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

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

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

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

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

Каждый фильтр берет результат из предшествующего фильтра, а затем изменяет его по-своему. Если после него больше нет фильтров, то результат отправляется в шаблон в 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 .

Валентин Сейидов автор-переводчик статьи « Getting Started With Liquid; Shopify’s Template Language »

📎📎📎📎📎📎📎📎📎📎