【Shopify】Liquidのfor文の使い方と注意点を解説｜使用例あり

2022年1月26日2022年2月6日

悩む人

ループ処理のfor文の書き方ってどうだったっけ？

こう思うことってよくありますよね？

ということで、今回は備忘録という意味も込めてLiquidでのループ処理に使えるfor文の解説をしていきたいと思います。

本記事の内容

for文の構文
for文の使用例
for文の注意点

「コレクション内の商品を一覧で表示したい」

なんて時にはfor文が非常に便利です。

トマトソース

ただ、for文の構文をよく忘れる私…

ということで、for文の備忘録としてまとめつつ、for文を使用する際の注意点についてもお伝えしていきます。

本記事は、Shopify公式サイトのIteration tagsを参考にお伝えしていきます。

for文の構文

for文の構文だけ思い出したい方のために、まず構文のみ記載しておきます。

{% for xxx in xxxの配列 %}
  {{ xxx }}
{% endfor %}

上記がLiquidのfor文の構文になります。

処理的には配列内の１要素をxxxという変数で取り出して、forとendforで囲った中で色々と処理することができます。

for文とは

for文は同様の処理を繰り返し行う際に使用できる構文です。

for文の中で使用できる属性（attributes)については、「forloopオブジェクト7つの使い方と注意点を解説」をご覧ください。

トマトソース

プログラムでは同じ処理を繰り返し記述することは良しとされていないので、同じ処理を行う場合は積極的にfor文を使用するようにしましょう。

for文の使用例

では、for文に使用例をご紹介していきます。

コレクション内の商品のタイトルを一覧で表示する

コレクション内の商品名を一覧で表示したい場合は、以下のように記述することで商品名の一覧を表示できます。

{% for product in collection.products %}
  {{ product.title }}
{% endfor %}

// 出力：商品A 商品B など...

コレクションのタグを一覧で表示

コレクション内のタグを一覧で表示したい場合には、以下のように記述することでタグ一覧を表示させられます。

{% for tag in collection.all_tags %}
  {{ tag }}
{% endfor %}

// 出力：冬物　夏物 など...

以上がfor文を使用した簡単な例の紹介になります。

上記では、簡潔にするためにHTMLタグやスタイルなどの記述を省いていますが、基本的にはforとendforで囲った部分に繰り替え処理を記述していけばOKです。

for文の注意点

Liquidのfor文を使う際に１つ注意なのは、１ページ内でfor文によって出力できる結果は最大で50件であるという点です。

なので、コレクション内に50件以上の商品があり、それをfor文で一覧表示したい場合などはご注意ください。

トマトソース

実際、私も案件でトップページに商品一覧を表示する際に50件以上表示しようとして表示されずで、その原因がわからず困っていましたが、この１ページ50件という条件があるせいでした。

もし50件以上あり、それらを表示したい場合は、 paginateタグを使用してページを分割するようにしましょう。