Введение в Ликвид


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

В этой статье

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

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

Синтаксис Liquid

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

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

Объекты

Liquid объекты получают данные с сервера Shopify. В шаблоне темы объекты помещены в двойные фигурные скобки {{ }} и выглядят так:

{{product.title}}

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

Liquid объект {{product.title}} можно найти в шаблоне «Товар» темы Shopify. Когда код файла компилируется и отображается на странице товара магазина Shopify, объект Liquid будет отображен в заголовке страницы. Например, в магазине одежды результатом может быть:

Великолепная футболка

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

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

Теги Liquid

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

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

{% if product.available %}
  Цена: 99,99 $
{% else %}
  Извините, этот продукт продан.
{% endif %}

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

Цена: 99,99 $

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

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

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

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

Фильтры

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

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

{{ 'привет мир!' | capitalize }}

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

Привет мир!

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

{{ 'Привет мир!' | capitalize | remove: "мир" }}

Строка сначала выводится как заглавная, а затем слово мир удаляется. Отобразится следующее:

Привет !

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

  • Фильтры массивов
  • Фильтры цвета
  • Фильтры HTML
  • Математические фильтры
  • Денежные фильтры
  • Фильтры строки
  • Фильтры URL
  • Дополнительные фильтры

Шаблоны тем

Вы можете получить доступ к файлам вашей темы из раздела «Темы» вашего кабинета в Shopify:

Рабочий стол

iPhone

Android

  1. Из вашего кабинета Shopify перейдите в Online Store > Themes.
  2. Найдите тему, которую хотите изменить, а затем нажмите Actions > Edit code.
  3. Кликните на имя файла Liquid, который вы хотите изменить и отредактируйте его.
  4. Нажмите Save.
  5. Проверьте соответствующую страницу своего интернет-магазина для контроля результата.
  1. В приложении Shopify нажмите Store.
  2. Нажмите … кнопку рядом с Online Store, а затем нажмите Manage sales channel.
  3. Нажмите Themes.
  4. Найдите тему, которую хотите изменить, а затем нажмите Actions > Edit code.
  5. Кликните на имя файла Liquid, который вы хотите изменить и отредактируйте его.
  6. Нажмите Save.
  7. Проверьте соответствующую страницу своего интернет-магазина для контроля результата.
  1. В приложении Shopify нажмите Store.
  2. Нажмите … кнопку рядом с Online Store, а затем нажмите Manage sales channel.
  3. Нажмите Themes.
  4. Найдите тему, которую хотите изменить, а затем нажмите Actions > Edit code.
  5. Кликните на имя файла Liquid, который вы хотите изменить и отредактируйте его.
  6. Нажмите Save.
  7. Проверьте соответствующую страницу своего интернет-магазина для контроля результата.

Дополнительные ресурсы

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

Чтобы посмотреть больше видео-роликов, посетите Youtube-канал Shopify.