Liquidでは、繰り返し処理や変数定義などを行うための、決まった文言や型があります。 最初から全て覚えなくても構いません。基本と調べ方がわかれば、よく使うものから自然と覚えていくことができます。
Shopifyテーマの制作・カスタマイズによく使われるものを学んでいきましょう。
Liquidのタグ(Tags)について
Liquidでは{%と%}で囲んで、繰り返しや変数定義などの“処理”を指示します。
この処理を指示するコードは、タグ(Tags)と呼ばれています。 Shopifyで使うLiquid Tagsの一覧は、公式リファレンスにも掲載されています。
公式リファレンス（英語）
- shopify.dev- Liquid tags
https://shopify.dev/api/liquid/tags - Liquid template language
https://shopify.github.io/liquid/
本講座では、よく使うもの・基本的なものを中心に紹介します。 今回は繰り返しと、条件分岐を見ていきましょう。
繰り返しタグ
for文
for文はループ処理（同じ処理を繰り返す）を行うための構文です。 指定したオブジェクトやプロパティ内にある要素を取り出し、繰り返し処理します。 前回の自作ブロック作成で配置したブロックの情報を取り出すのにも使いましたね。
繰り返し行いたい処理
{% endfor %}
Shopifyテーマの場合、配列にはオブジェクト名・プロパティ名が入ります
for文を使って、以下のように{{ product.title }}を囲ってみましょう。 “collections.all”は、Shopifyが自動生成している全商品コレクションです。
lesson2.liquid
{% for product in collections.all.products -%}
<h3>{{ product.title }}</h3>
{%- endfor %}
このfor文は、商品の一覧を表示させるときによく使われています。
コードを保存して、ストアのページを見てみましょう。 ホームページでも、商品ページでも、ストアに登録されている商品のタイトルが並びました。
ちなみに、商品タイトルを呼び出すのに使っている{{ product.title }}。
このproductはオブジェクトのproductではなく、for文を使うときに定義した変数名です。
ですので、以下のように変数名を変えても、同じように表示できます。
lesson2.liquid(変数名を変更)
{% for item in collections.all.products -%}
<h3>{{ item.title }}</h3>
{%- endfor %}
else
{% else %}タグを使うと、繰り返し処理をするアイテムが無い場合の処理を記述することができます。
lesson2.liquid
{% for item in collections.all.products -%}
<h3>{{ item.title }}</h3>
{% else %}
<p>商品がありません</p>
{%- endfor %}
limit（パラメーター）
forタグには、繰り返しの指定・制御に使えるパラメーターも用意されています。 その中の1つであるlimitを使うと、繰り返す回数を設定できます。
設定方法は、繰り返し処理を行う配列の後にlimit: 繰り返す最大数と記述するだけです。
lesson2.liquid
{% for item in collections.all.products limit: 3 -%}
<h3>{{ item.title }}</h3>
{% else %}
<p>商品がありません</p>
{%- endfor %}
使用できるパラメーターは他にもあります。一覧はリファレンスの方をご確認ください。
paginateについて
一般的にはアイテムがある限り繰り返し処理を行うfor文。 ですが、Shopifyでは、for文による繰り返しは“1ページで最大50回まで”と定義されています。
paginateタグを使うと、繰り返し処理を複数ページに分割して表示させることが出来ます。 1ページで表示しきれない（50を超えるアイテムがある）場合は、 paginateタグでページを分割します。 こうすることで、全アイテムを見られるようにすると良いでしょう。
{% for 変数名 in 繰り返す配列 %}
...
{% endfor %}
{% endpaginate %}
byの後に1～50までの数値を入れて、1ページでの出力数を設定可能です。 1ページに50件も表示させたくない! という時にも使えますね。
paginateは商品一覧やブログの記事一覧など“一覧”ページを作る場合に使用することが多いです。 下記のコードだと、商品の一覧を1ページに12件ずつ表示することができます。
{% paginate collections.all.product by 12 %}
条件分岐タグ
条件分岐を使うと「～の時には…する」のように、処理を実行するための条件をつけることができます。
if / elsif
if文は指定した条件を満たしているときに、処理を実行します。
前回のレッスンで書いた{% if shop.name != blank %}もif文ですね。
「ではない」を意味する != は演算子と言います。 よく使う演算子の例としては、以下が挙げられます。
| 演算子 | 意味 |
|---|---|
| A == B | AとBが等しい |
| A !== B | AとBが等しくない |
| A > B | AがBよりも大きい |
| A < B | AがBよりも小さい（未満） |
| A >= B | AがB以上である |
| A <= B | AがB以下である |
| A or B | AまたはBの条件を満たしている |
| A and B | AとBの両方を満たしている |
if文では「elsif」を使うことで、複数の条件と処理を設定することも可能です。
lesson2.liquid
{% if shop.name == "SKILLHUB" %}
<!-- ショップ名がSKILLHUBの時に実行したい処理 -->
<p>SKILLHUBのお店です</p>
{% elsif shop.name != blank %}
<!-- それ以外で、ショップ名が登録されている時に実行したい処理 -->
<p>{{ shop.name }}</p>
{% endif %}
unless文
unless文はif文の反対、指定した条件が満たされなかった時に処理を実行します。 「ストア名が登録されていたら実行」したい場合は、演算子を変えて以下のように書きます。
case/when
case文は、変数の値を使った条件分岐を作りたいときに使います。 分岐条件に使いたい変数名をcase、分岐を実行する変数の値をwhenで指定します。 前回の複数ブロックの作成と使い分けのレッスンで、ブロックの種類に応じた表示をさせる為に使いましたね。
下図は、ブロックのtypeプロパティの値に応じて、出力を指定しています。
Shopifyテーマ“Dawn”のセクションファイルでは、この{% case block.type %}の分岐が多用されています。
仕組みを理解するとカスタマイズも捗ります。
else
elseを使うと、設定したどの条件に当てはまらない時の処理を指示できます。 if文、unless文、case文、どれでも利用可能です。
lesson2.liquid
{% if shop.name == "SKILLHUB" %}
<!-- ショップ名がSKILLHUBの時に実行したい処理 -->
<p>SKILLHUBのお店です</p>
{% elsif shop.name != blank %}
<!-- それ以外のショップ名が登録されている時に実行したい処理 -->
<p>{{ shop.name }}</p>
{% else %}
<!-- どの条件にも当てはまらない時に実行したい処理 -->
<p>ストア名は考え中です。</p>
{% endif %}