[Shopify] all_productsの商品取得上限は1ページ20商品の制限があるので解決してみる

2021年6月12日

ページ内で商品情報を取得する際は"all_products"を使用していたのですが、問題が発生してしまいました。

ページ内で20回以上all_productsを使用すると21回目のall_productsで商品が取得できなくなってしまうのです。英語ベースで色々調べてみると、1ページ内においてall_productsで取得できる商品の上限は20商品ということでした。

all_productsは、とても便利で商品情報を取得する際は重宝していたのですが、使えないことにはどうしようもありません。他の方法で解決していきます！

Shopifyで使用できる"all_products"とは

そもそもShopifyのall_productsとは何なのでしょうか。

例えば『固定ページ内で商品情報を取得して、商品タイトルを表示したい』といった場合に非常に便利です。普通は全商品コレクション（all）から、各商品をループで回して、特定のskuやhandleなどに該当する商品を抜き出す形を思いつきます。

{% for product in collections.all.products %}
　　{% if product.handle == "product-url" %}
　　　　{{ product.title }}
　　{% endif %}
{% endfor %}

しかし、all_productsを使用すると、この処理が

{% all_products["product-url"].title %}

と1行で終わってしまうのです！

schemaタグと組み合わせるなど、より詳しい使い方は下記ブログ記事をご覧ください。

https://ec-penguin.com/blogs/shopify/all-product-liquid

all_productsの上限は1ページにつき、20商品が最大

何と便利な。と毎回感謝しながら使っていたのですが、all_productsは1ページ内で20商品しか取得できないことが発覚しました。

そうすると、例えば

コレクションは使わないで、固定ページを作成して、50商品くらい並べたい場合
固定ページにコンテンツを作成し、各コンテンツに合計21商品以上を紐付けたい場合
ブログ記事内で「おすすめ商品50選」など商品紹介したい

などの場合で、all_productsを使用することが実質できないのです。

商品数が少ないストアの場合は、特に気にすることがないかも知れませんが、例えば商品数が500や1000を超える大規模ストアだと、20商品以上を取得したい場面は結構ある印象です。

1ページに21商品以上取得したい時の解決方法

では、1ページに21商品以上取得したい場合の解決方法を解説していきます。

簡単にいうと、最初の「all_productsとは」の部分で説明したコレクションの中から該当商品を選ぶ方法を使用します。

{% for product in collections.all.products %}
　　{% if product.handle == "product-url" %}
　　　　{{ product.title }}
　　{% endif %}
{% endfor %}

ただこの方法にも2つ欠点があります。

collectionのforループでも商品数は50商品しかループできない
→そもそも50商品以上商品があるストアだと、全商品取得できない
50商品取得したい場合、全商品コレクションループを50回繰り返さないといけない
→ストアの全商品数×50回でページ表示速度が遅くなる

そして、その欠点を補う方法がこちらです。

{% paginate collections.all.products by 1500 %}
　　{% for product in collections.all.products %}
　　　　{% if product.handle == "product-url1" %}
　　　　　　{% assign product1 = product %}
　　　　{% endif %}
　　　　{% if product.handle == "product-url2" %}
　　　　　　{% assign product2 = product %}
　　　　{% endif %}
　　{% endfor %}
{% endpaginate %}

{{ product1.title }}
{{ product2.title }}

やっていることとしては、まずpaginationを使って、collectionループの上限50商品をなくしています。今回は商品数1500を最大値として設定していますが、もしそれ以上の商品数があるストアであれば変更してください。

そして、商品ハンドルが"product-url1", "product-url2"だった場合にそれぞれ変数product1, product2に代入しています。

最終的にその変数内に格納したproduct1, product2の商品タイトルを表示させているという処理になります。

この方法であれば全商品コレクションループを一度で終わらせられるので、ページ表示速度の遅延も最小限に抑えられる印象です。