今回はShopifyのfor文のデフォルトループ制限について記事を書きたいと思います。

Liquidのfor文のデフォルトは50ループまで

商品数が多いショップ様の構築をしているとぶち当たる問題がここです。
たとえば、'new-arrival'というコレクションに150商品が登録されていたとします。
以下のコードは、'new-arrival'のコレクション内の商品名を順番に表示させるコードです。

{% for product in collections['new-arrival'].products %}
  <p>{{ product.title }}</p>
{% endfor %}

上記のコードを実行した場合、新規登録順で50商品までしか表示されません。
これは、Liquidのfor文がデフォルトで持っている「for文のループは50回まで」という制限によるものです。

公式ドキュメントにも以下のように記載されています。

You can do a maximum of 50 iterations with a for loop. If you need to iterate over more than 50 items, then use the paginate tag to split the items over multiple pages.

簡単に訳すと、「for ループでは最大 50 回のループを実行できます。 ループが50を超える場合は、paginate タグを使用して結果を複数のページに分割します。」という内容です。

つまり、paginateタグを使用することで50回以上のループを行うことが可能ということになります。

paginateタグを使用して50回以上のループを実行

では、実際にpaginateタグを使用してみましょう。
公式ドキュメントはこちらからご確認ください。

先ほどと同じように150商品登録されている'new-arrival'というコレクションの商品名を表示していきます。
以下のコードで実装が可能です。

{% paginate collections['new-arrival'].products by 1000 %}
  {% for product in collections['new-arrival'].products %}
    <p>{{ product.title }}</p>
  {% endfor %}
{% endpaginate%}

上記コードでは1000商品までループで表示させることができます。
注意点としては、1000商品以上はサポートされておらず表示することができません。(※2022年10月1日現在)

ブログなどの表示数にも影響します

50回のループ制限はLiquidのfor文のデフォルトの設定なので、商品数だけではなくブログ記事などループで表示するもの全てに影響してきます。
実際に、お客様のショップを構築している際にこの問題に直面しました。

ブログを表示する際にもpaginateを使用してループするようにしましょう。
以下のコードは、'blog'というブログカテゴリーの記事タイトルを出力します。

{% paginate blogs['blog'].articles by 1000 %}
  {% for article in blogs['blog'].articles %}
     <p>{{ article.title }}</p>
  {% endfor %}
{% endpaginate%}

タグで出し分けをする際には注意が必要

先ほどのコードでは、カテゴリー内のブログや商品を全て表示しているので問題は特に起こらないのですが、タグを使用して出し分けをする際に少し注意が必要です。

先述したように、for文では最大1000回までしかループができません。
例えば先ほどの'blog'の中の'sample'というタグがついた記事のみを表示させてみます。

{% paginate blogs['blog'].articles by 1000 %}
  {% for article in blogs['blog'].articles %}
    {% for tag in article.tags %}
      {% if tag == 'sample' %}
        <p>{{ article.title }}</p>
      {% endif %}
    {% endfor %}
  {% endfor %}
{% endpaginate%}

'sample'というタグがついた記事をコンスタントに更新する場合は上記のコードで表示が可能です。
しかし、'sample'のタグをつけた記事を更新してから別のタグをつけた記事を1000記事以上投稿した場合、上記コードを実行してもタイトルは1つも表示されません。

1記事目　タグ：'news'
2記事目　タグ：'new-arrival'
3記事目　タグ：'news'
~ 中略 ~
1000記事目　タグ：'new-arrival'
➖➖➖➖ ↑ｺｺﾏﾃﾞﾋｮｳｼﾞ↑ ➖➖➖➖

➖➖➖➖ ↓ｺｺｶﾗﾋｮｳｼﾞｻﾚﾅｲ↓ ➖➖➖➖
1001記事目　タグ：'sample'
1002記事目　タグ：'sample'

ブログや商品のタグ出し分けはもちろん、販売元(vendor)などの出し分けをする場合にも注意が必要です。

まとめ

今回の内容はループ制限を知らないと躓きやすい部分かと思います。(私も原因が分からず結構な時間を費やしました。)
特に中小のショップ様の構築ではテスト環境でブログや商品数を多く入れることはなかなかないかと思うので、構築時に気付きにくいという点が厄介です。

私自身も気を付けて実装していきたいと思います。
この記事が、私と同じ所で困っている方の助けになれていたら嬉しいです。