特定のコレクションを○件表示したい

日本語 ディスカッション 技術的なQ＆A
1

index.liquidで特定のコレクションを6件表示したいです。

{% assign collection = collections['hoge'] %}
{% for product in collection.products %}
  <a href="{{ product.url }}">{{ product.title }}</a>
{% endfor %}

こちらでコレクション（hoge）を出力していますが、件数の制御方法が分からず困っております。

ご存知のおられましたらご教授いただけますでしょうか。

1 Like
2

以下のlimitを使えば可能かと思います。
https://shopify.dev/docs/themes/liquid/reference/tags/iteration-tags

試していませんが、

{% for product in collection.products  limit:6 %}

とかはどうでしょう？

Liquidについては、一度統合的に学習されると色々応用が効いてよろしいかと思います。
https://shopify.dev/docs/themes/liquid/reference
https://www.shopify.jp/blog/partner-shopify-template-language-liquid-overview

3

私のショップで実際に、Debut のindex.liquid を以下にようにしたところ、ご質問内容のように出力されました。

{{ content_for_index }}

{% assign collection = collections['frontpage'] %}
{% for product in collection.products limit:6 %}
<a href="{{ product.url }}">{{ product.title }}</a><br/>
{% endfor %}

上記のlimit:6 をlimit:3 にすると、3件になるので、ご期待の動作になっているかと思います。

4

ご回答ありがとうございます。

いただいた回答通り試しましたが思った出力にならず、いまだ全件表示のままでした。

{% assign collection = collections['tops'] %}
{% for product in collection.products limit:3 %}
{% include 'product-card-grid', max_height: 400 %}
{% endfor %}

こちらが実際に記述しているコードになります。

for文を途中でbreakさせて、ループを止める方法も考えましたが

liquidでの抜け方が分からなかったため断念しました。

今はcssで○件以上は非表示としています。

また、別の質問にはなりますがこの中で表示順を変えることは可能でしょうか？

（売上順やアルファベット順など）

お手数おかけして大変恐縮ですがご回答いただけますと幸いです。

5

ご回答ありがとうございます。

いただいた回答通り試しましたが思った出力にならず、いまだ全件表示のままでした。

{% include 'product-card-grid', max_height: 400 %

この部分が私のコードと違いますが、まずは原因の切り分けのために、私のコード同様にproduct.titleを試しに出してみるのはどうでしょうか？

（Snipetのincludeに問題があるのか、for 文自体に問題があるのか）

ちなみにループの抜け方は以下となります。

https://shopify.dev/docs/themes/liquid/reference/tags/iteration-tags

コレクションのソートは、以下の方法で設定によって可能です。
https://help.shopify.com/ja/manual/products/collections/collection-layout#part-af4fe2072df0ce55

Liquidでやる場合は以下となります。

商品タイトル順やベストセラー順は上記の方法で対応可能です。

6

ループを抜ける方法でうまく出力ができました！

並び替えは管理画面の方から試してみようと思います。

丁寧にご回答いただきありがとうございました。

1 Like