【Shopify】TOPページに商品一覧を新着順で出力する - #07

前回の記事で、商品一覧ページのカスタマイズ方法を紹介しました。

今回はそれを応用して、TOPページに最新の商品をx件出力する方法を紹介します。

■バックナンバー

はじめに
どのようにTOPページに最新の商品を出力するか
コードを書く前の下準備
コード
まとめ

はじめに

今回使用するテーマは無料の「Minimal」です。

公式テーマのURL：https://themes.shopify.com/themes/minimal/styles/modern

このテーマをベースにカスタマイズしていきます。

とはいえ、各テーマの既存のコードは一切使わないので、どのテーマをベースにしても大丈夫だと思います。

どのようにTOPページに最新の商品を出力するか

この項では、どのような方法でTOPページに最新の商品を出力できるかの考え方の話になります。

方法だけ知りたい方は飛ばしてください。

TOPページに最新の投稿を表示させるには、コレクションから商品を取得して、出力します。

{% for collection in collections %}
  {% for product in collection.products %}
    {{ product.○○ }}
  {% endfor %}
{% endfor %}

このように書くと、それぞれのcollectionを取得して、productsの中からproductの商品名や金額などを出力できます。

しかし、この方法だと、以下のような並び方になってしまいます。

1番目に取得したコレクションの中の商品A
1番目に取得したコレクションの中の商品B
2番目に取得したコレクションの中の商品A
2番目に取得したコレクションの中の商品B
3番目に取得したコレクションの中の商品A
3番目に取得したコレクションの中の商品B

例えば、「3番目に取得したコレクションの中の商品A」が一番最新の商品でも出力される順番は5番目になってしまいます。

ではどうすればいいでしょうか。

・

すべての商品に対して、「ALL」のようなコレクションを新たに追加してあげ、TOPページでは「ALL」のコレクションのみを取得して出力してあげます。
（元から設定しているコレクションはそのままです）

こうすることで、先程の問題が解決できます。

そんな方法で良いの...と思う方もいるかと思いますが、実はこの方法は公式ドキュメントで紹介されている方法なのです。

https://stackoverflow.com/questions/14443714/how-to-get-all-products-of-a-shopify-shop

https://help.shopify.com/en/manual/online-store/os/using-themes/change-the-layout/change-catalog-page

コードを書く前の下準備

すべての商品に「All」というコレクションを追加します。

すでに設定しているコレクションはそのままで大丈夫です。

まずは、新しく「All」コレクションを作成します。

すでに存在する商品に対して、ひとつひとつ新しくコレクションを設定するのは手間なので、上記の画像のように条件を設定してあげます。

条件を設定することで、設定した条件にマッチする商品に対して自動でコレクションが設定されます。

上記の画像では、商品価格が0円より大きいで設定していますが、すべての商品に該当する条件であればなんでも大丈夫です。

次に、商品の並び替えで新着順を設定します。

（今回は新着順にしていますが、これを変えれば新着順以外でも商品を出力できます）

これで下準備は完了です。

コード

{% for collection in collections %}
  {% if collection.handle == 'all' %}
    {% for product in collection.products %}

      ここに商品名や金額などを記述する
      {{ product.title }}
      {{ product.url }}

    {% endfor %}
  {% endif %}
{% endfor %}

前回の記事を読んでいる方なら理解できると思いますが、簡単にコードの解説をします。