FROM CACHE - jp_header
解決済

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

toyome
観光客
3 0 2

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

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

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

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

 

1 件の受理された解決策
junichiokamura
Community Manager
1200 280 506

成功

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

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

{% 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でやる場合は以下となります。
https://shopify.dev/docs/themes/liquid/reference/filters/array-filters#sort

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

Senior Partner Solutions Engineer

元の投稿で解決策を見る

5件の返信5

junichiokamura
Community Manager
1200 280 506

以下の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 

Senior Partner Solutions Engineer
junichiokamura
Community Manager
1200 280 506

私のショップで実際に、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件になるので、ご期待の動作になっているかと思います。

Senior Partner Solutions Engineer
toyome
観光客
3 0 2

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

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

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

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

 

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

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

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

 

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

(売上順やアルファベット順など)

 

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

junichiokamura
Community Manager
1200 280 506

成功

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

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

{% 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でやる場合は以下となります。
https://shopify.dev/docs/themes/liquid/reference/filters/array-filters#sort

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

Senior Partner Solutions Engineer
toyome
観光客
3 0 2

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

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

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