Shopifyでページにコレクションの商品リストを任意の順序で表示させる

以前に「Shopifyでページに任意のコレクションリストを作成する」という記事を作成しましたが、今回はコレクションを指定し、そのコレクション内に存在する商品の一覧を価格や登録日順などの任意の順序で表示させる方法です。

前提と実現したいこと

• Shopify使用し、コレクションを作成
• 特定のページにそのコレクションに含まれる商品の一覧を、任意の順序で表示させる

サンプルコード

• コレクションを作成
• page.for-collectionのように専用のページテンプレートを作成(中身は既存のpage.liquidの中身を複製で可)
• 作成したpage.for-collectionにコードを追加
• ページを追加してテンプレートでpage.for-collectionを選ぶ

手順は上記で、追加するコードは下記のとおりです。公開日が新しいものが上に来るようにしています(降順)。

<div class="products-wrap">
{% assign products = collections['任意のコレクションのハンドル'].products | sort: 'published_at' | reverse %}
  {% for product in products %}
      <a href="{{ product.url }}">
        <p>{{ product.title | escape }}</p>
        <p>{{ product.price }}</p>
        <p>{{ product.created_at }}</p>
        <p><img src="{{ product.featured_image | image_url: 300x ,crop: 'center' }}"></p>
      </a>
  {% endfor %}
</div>

順番を決定しているのは以下の部分となります。

{% assign products = collections['任意のコレクションのハンドル'].products | sort: 'published_at' | reverse %}

以下のように書き換えることで色々と変更可能です。

商品公開日順(旧→新/昇順)
{% assign products = collections['任意のコレクションのハンドル'].products | sort: 'published_at' %}

価格順(安→高/昇順)
{% assign products = collections['任意のコレクションのハンドル'].products | sort: 'price' %}

タイトル順(A-Z/昇順)
{% assign products = collections['任意のコレクションのハンドル'].products | sort: 'title' %}

sortフィルターに関しては以下のドキュメントを参照。

• Array filters

更新日順は可能か？

調べた範囲では、更新日順を実現する方法がわかりませんでした。

productオブジェクト自体にupdated_atのような更新日に関する項目がないので、並べ変える手がかり自体が存在しないためです。
もっとも、productオブジェクトをJSON形式で出力して確認しただけなので、実際には内部に更新日情報をもっているのではと思いますが。

アプリを併用して、商品を更新した際にカスタムフィールドに日時を保存し、それを取り出して用いるなどであれば実現可能かもしれません。

コレクションページの更新日順

• Re: Sort collection order by Published or Last Modified Date – Page 3 – Shopify Community

上記のフォーラムのスレッドを見る限りでは、コレクションページに関しても標準機能では実現不可のようで、現時点での対策はアプリの使用か手動で並び替えるしかないとのこと。
collectionオブジェクトにはupdated_atで日付が記録されているのですが、それでもupdated_atによる並び替えは出来ませんでした。

一応機能追加のリクエストは行われているようですが、2019年から進展なしに見えます。

結び

更新日順に並べられない件に関しては調査不足が否めないので、後ほどまた調べてみたいと思います。