Введение по Liquid: Коротко об операторах

Вы наверняка заметили, что в этом примере мы использовали оператор >. Так как переменная 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="" />

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