【Shopify】productのループ処理で個数制限を突破する方法

はじめに

Liquidのfor文で全商品を処理したいのにループが途中で終わる…なんてことがあり、
調べても英語ばかりで分かりにくかったので備忘録も兼ねて解決方法を書いていきます。

普通にループを回してみる

Liquidタグで全商品を取得して処理するコードは以下のようになるかと思います。

{% for product in collections.all.products %}
・・・
{% endfor %}

開発用サイトでテスト用にちょこっと商品を入れているだけだと気づきにくいのですが、
これだけだと product は最大で50個しか取れません。

全商品数が500個だとしてもループは50回しか回りません。
加えて厄介なのが、検証のために

<script>
  console.log("{{ collections.all.products.size }}");
</script>

と書いて実行してもコンソールには500と表示されるため、デバッグすると余計に訳が分からなくなります。

原因

実はShopifyはデフォルトで「layout内で取得するproductは1ページ50個まで」という制限があり、
Layout内の全ての商品ループにその制限が効いてしまっているのです。

上で書いたfor文は実際には以下のような動きになっています。

{% paginate collections.all.products by 50 %} <!-- Shopifyデフォルトの個数制限 -->
  {% for product in collections.all.products %}
  ・・・
  {% endfor %}
{% endpaginate %}

制限を突破する

{%- paginate -%}タグで1ページの商品数を上書きしてやります。

{% paginate collections.all.products by 1000 %}
  {% for product in collections.all.products %}
   ・・・
  {% endfor %}
{% endpaginate %}

ページネーションしない場合でも、for文で50個以上の商品を処理するときには{%- paginate -%}タグで1ページあたりの商品数を書き変える必要があります。
ややこしいですね。

参考

https://community.shopify.com/c/Shopify-Design/50-Product-limit-on-collections/td-p/204693
https://community.shopify.com/c/Shopify-Design/Liquid-loop-stops-at-50-even-though-there-are-114-items-in-the/m-p/50573