今回は、コレクションに登録されている商品の情報を取得する方法をご紹介します。
コレクションページとその他のページで取得方法が異なるので、ぜひ参考にしてみてください。

コレクションページで商品情報を取得する

コレクションページでは、シンプルなコードで商品情報の取得ができます。
※コレクションページとは、URLが《 /collections/コレクションハンドル》となっているページです。

{% for product in collection.products %}
    <p>{{product.title}}</p>
    <p>{{product.price}}</p>
{% endfor %}

その他にも、productオブジェクトを使って商品のURLや商品画像などの情報を表示することができます。
使用できるproductオブジェクトについては公式リファレンスをご確認ください。

コレクションページ以外でコレクションの商品情報を取得する

コレクションページ以外のページで先ほどのコードを記述した場合、どのコレクションの商品情報を取得したいのかが分からないため、エラーとなってしまいます。

今回は、'chocolate'というコレクションハンドルをもつチョコレートコレクションの情報を取得してみます。

{% for product in collections["chocolate"].products %}
    <p>{{ product.title }}</p>
    <p>{{product.price}}</p>
{% endfor %}

先ほどのcollectionsの記述の後に['コレクションハンドル']という記述を追加しました。
これで、チョコレートコレクションの商品を取得してねというコードになります。

先ほどと同様に、productオブジェクトを使用することで様々な商品情報を取得することができます。

管理画面から動的にコレクション商品を表示する

管理画面から、表示させるコレクションを動的に変更できるととても便利です。
schemaタグを使用して管理画面からコレクションの選択ができるセクションを作成してみましょう。

{% assign collection = section.settings.collection %}

<ul>
  {% for product in collection.products %}
    <li>
      <a href="{{ product.url }}">
        {{ product.title }}
      </a>
    </li>
  {% endfor %}
</ul>


{% schema %}
{
  "name": "コレクションリスト",
  "settings": [
    {
      "type": "collection",
      "id": "collection",
      "label": "コレクションを選択"
    }
  ],
  "presets": [
    {
      "name": "コレクションリスト"
    }
  ]
}
{% endschema %}

これで、管理画面からセクションを追加した際に任意のコレクションを選択できるようになります。
例えば、春・夏・秋・冬のコレクションを作成して、季節ごとに表示するコレクションを変えていきたいという場合でもコードの修正をすることなく簡単に変更が可能です。

for文のループ数制限に注意！

Liquidのfor文を使用したループはデフォルトで50回の制限がかかっています。
今回のコレクションから商品情報を取得する場合も例外ではありません。
これは、コレクションページでもその他のページでも同じです。

もし、50商品以上の情報を取得したい場合はpaginateタグを使用する必要があります。
paginateタグの使用方法については以下の記事にまとめていますので、ご参考になりましたら幸いです。

【Shopify】Liquidのfor文は50回しかループできない問題について

paginateタグが必要な例

• コレクションの商品から、特定のタグが付いた商品のみを表示する。
• コレクションの商品から、〇〇円以下の商品のみを表示する。　など…

コレクションの登録アイテム数が50商品以下の場合は問題なく表示されますが、今後商品が増えていくことを考えて最初からpagineteを使用しておくことがおすすめです。

paginateタグが不要な例

• 固定ページにコレクションの全商品を表示させる。　など…

コレクションの登録アイテム数が50商品以上の場合でも、ページネーションを追加することで50アイテムごとに1ページ目、2ページ目と表示させることが可能です。

まとめ

今回ご紹介した内容は、コレクションリストを作成したり、イベント用の固定ページに対象のコレクションを表示させるなど様々な場面で使用できるかと思います。
ぜひお試しください！


■パートナー募集について
運営元であるkraftでは一緒に活動するパートナーを募集しています。
個々が協力していくことによってクオリティの高い制作をおこなっていくことができると考えています。
ご興味のある方は、こちらよりご連絡いただけますと幸いです。(※運営元の事業サイトに飛びます)

具体的な内容については以下URLをご確認ください。
パートナー募集の詳細について