[Shopify] Liquidの基本構文まとめ（if, for, etc…)

2023-04-29

Shopify Liquidの基本的な文法のまとめです。

他の言語のまとめはこちら：
JavaScript（JS）の基本構文まとめ
 PHPの基本構文まとめ
 Shopify Liquidの基本構文まとめ（当記事）

変数宣言

{% assign hello = 'Hello world!' %}
{{ hello }}

条件分岐（if）

{% assign num = 70 %}

{% if num >= 80 %}
  80以上です
{% elsif num >= 50 %}
  50以上です
{% else %}
  50未満です
{% endif %}

{% unless num >= '80' %}
  80以上ではありません
{% endunless %}

比較演算子

A == B	AとBが等しい
A != B	AとBが等しくない
A > B	AがBより大きい
A >= B	AがB以上
A < B	AがBより小さい（未満）
A <= B	AがB以下

複数の条件で条件分岐する（AND,OR)

{% assign numA = 30 %}
{% assign numB = 70 %}

{% if numA >= 50 and numB >= 50 %}
  numAとnumB、両方とも50以上です
{% endif %}
{% if numA >= 50 or numB >= 50 %}
  numAとnumB、どちらか(もしくは両方)が50以上です
{% endif %}

繰り返し（for）

回数指定

{% comment %}1〜10を順番に出す{% endcomment %}
{% for i in (1..10) %}
  {{ i }}
{% endfor %}

商品

{% comment %}コレクション「all」の商品{% endcomment %}
{% for product in collections['all'].products %}
  {{ product.title }}
  {{ product.price | money }}
  {{ product.featured_image | image_url: width : 500 }}
  {{ product.url }}
{% endfor %}

ブログ

{% comment %}ブログ「news」の記事{% endcomment %}
{% for article in blogs['news'].articles %}
  {{ article.title }}
  {{ article.price | money }}
  {{ article.image.src | img_url: '500x' }}
  {{ article.url }}
  {{ article.published_at | date: '%Y-%m-%d' }}
{% endfor %}

メニュー

{% comment %}ハンドル「main-menu」のメニュー{% endcomment %}
{% for link in linklists['main-menu'].links %}
  {{ link.title }}
  {{ link.url }}
{% endfor %}

他の言語のまとめはこちら：
JavaScript（JS）の基本構文まとめ
 PHPの基本構文まとめ
 Shopify Liquidの基本構文まとめ（当記事）