[Shopify]コレクションから上限50商品の制限なく、全ての商品を取得する方法

今回紹介するのは、コレクション内の商品を制限なく表示する方法です。デフォルトでcollection内の商品を取得すると、実は50商品が最大取得できる商品数なのです。

よって、商品数が多くなってくるとpagination作成するなど1ページ上に表示することができません。しかし、今回紹介する方法を使用することで上限の50商品を無くし、好きな数の商品数を読み込むことができるようになります。

商品数が少ないストアだと、使う機会はあまりありませんが、商品数が多い大規模ストアだと頻繁に直面する壁なので良く使う方法です！

コレクション内の商品を表示させる方法

まず単純にコレクション内の商品タイトルを取得する方法です。

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

collectionページの中だと、これで良いのですが、それ以外のページでコレクションを指定して商品取得しようとすると下記のようになります。（colletion_urlは指定するコレクションのハンドル名です。）

{% for product in collections[collection_url].products %}
　　{{ product.title }}
{% endfor %}

もしコレクションから取得する商品が50商品以下の場合は、この方法で問題ないです。

コレクション内の上限50商品というデフォルト設定

この50商品という上限を無くす方法は次に紹介しますが、その前に、なぜ上限が50商品であるのかの仕組みを説明します。

実は先ほどご紹介した単純に商品をコレクションから取得する方法

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

となっていますが、実はこの部分は

{% paginate collection.products by 50 %}
　　{% for product in collection.products %}
　　　　{{ product.title }}
　　{% endfor %}
{% endpaginate %} 

というpaginationが隠れているのです！

paginationは、下記のようなもので上記のコードだと1ページごとに50商品ずつ表示しますよというコードになります。

つまり、このページネーションの存在自体が"50商品の上限"を作り出してしまっている原因になっているのです。

商品取得の上限をなくす表示方法

今までの説明を踏まえた上で、コレクションの商品取得上限を無くす方法です。

{% paginate collection.products by 1000 %}
　　{% for product in collection.products %}
　　　　{{ product.title }}
　　{% endfor %}
{% endpaginate %} 

paginationの"1000"に変更しました。

これで、コレクションの中から最初の1000商品を取得することができました。例えば全体の商品数が1000商品以下であれば、上記の方法で全商品取得することができます。

もし商品数が1500商品ある場合でも、極端に言えばpagination部分を"10000"に変更してしまえば上限を無くし、全商品取得することができるのです。

 [Shopify]コレクションから上限50商品の制限なく、全ての商品を取得する方法 まとめ

以上、コレクションから商品を取得する際の５０商品上限を突破する方法でした。

最初実装している時に当たり前に50商品以上取得できると思っていたので、なぜ取得できない商品があるのだろう。と調べるところからスタートし、結構時間を食ってしまいました。

実際に問題に直面していなくても『上限あるのかぁ』と頭の片隅に入れておくことで将来的に役立つかも知れません。

最後までお読みいただき、ありがとうございました。それでは本日も良い1日を！