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

for文のアイキャッチ
悩む人

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

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

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

本記事の内容
  • for文の構文
  • for文の使用例
  • for文の注意点

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

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

トマトソース

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

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

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

目次

for文の構文

for文の構文

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

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

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

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

for文とは

for文とは

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

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

トマトソース

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

関連記事 【Shopify】Liquidのfor文の使い方と注意点を解説|使用例あり

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文の注意点

settings_schema.jsonの注意点

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

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

トマトソース

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

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

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

今回はLiquidのfor文について解説してきました。

構文的には比較的簡単ですが、よく忘れてしまう構文の一つかと思います。

トマトソース

Liquid以外にもJavascriptでもfor文ありますしね…

for文を使用する際は1ページに最大で50件までの表示になるという点に注意しつつうまく活用して素敵なストアの構築にお役立てください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (1件)

コメントする

目次
閉じる