2020.9.16

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

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

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

 

■バックナンバー

はじめに

今回使用するテーマは無料の「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. 1番目に取得したコレクションの中の商品A
  2. 1番目に取得したコレクションの中の商品B
  3. 2番目に取得したコレクションの中の商品A
  4. 2番目に取得したコレクションの中の商品B
  5. 3番目に取得したコレクションの中の商品A
  6. 3番目に取得したコレクションの中の商品B

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

 

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

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

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

 

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

How to get all products of a Shopify shop?
In my theme development, I don't find the way to get all the products of my shop. Although, I can retrieve all the collections with the variable collections (ex...
Change your catalog page
Change the catalog page of your Shopify store.

コードを書く前の下準備

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

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

 

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

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

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

 

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

 

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

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

 

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

コード

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

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

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

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

  1. collectionsオブジェクトをforで回す
  2. collectionallの場合のみ次の処理を行う(今回はcollection.handleで判別しています)
  3. collectionオブジェクトのproductsforを回す
  4. ここでproductオブジェクトが取得できるので、商品名や金額などを出力する

 

TOPページに限らず、どのページもこのコードですべての商品を登録した順番で出力できます。

まとめ

今回は、管理画面からコレクションを新たに設定して、それを組み合わせて処理を行いました。

Shopifyでは、今回のようにliquidと管理画面で設定した値を組み合わせて処理を行う場面が多々あります。

様々な機能を使いこなすのも、Shopifyを自由にカスタマイズするコツのひとつだと思うので、管理画面を色々触ってみるのも良いと思います。

 

■バックナンバー

シェアする
フォローする
Web-Guided - web業界で働く方を少しだけ手助けするメディア