Shopifyでページに任意のコレクションのリストを作成する

フォーラムの質問の中に参考として挙げられている手法でよくわからない手法があり、別の単純な方法で作ることは難しくはないのではと試作した内容です。

前提と実現したいこと

• Shopify使用し、コレクションを複数設定
• ページに任意のコレクションをいくつか表示させる

サンプルコード1

• コレクションを作成し「コレクションの画像」を設定
• page.collection-list-aのように専用のページテンプレートを作成(中身は既存のものを複製で可)
• page.collection-list-aにコードを追加
• ページを追加してテンプレートでpage.collection-list-aを選ぶ

手順は上記で、追加するコードは下記のとおりです。

{% comment %}
ハンドルA、ハンドルB、ハンドルCというハンドルを持つコレクションを表示する想定。
並び順を変更したい場合はsortフィルタで多少変更可能。
作成されたテンプレートには以下のような記述があるはずなので、その下あたりに追加。
<div class="rte">
  {{ page.content }}
</div>
{% endcomment %}
<div class="collections-list-wrap">
  {% for collection in collections %}
    {% if collection.handle == 'コレクションのハンドルA' or collection.handle == 'コレクションのハンドルB' or collection.handle == 'コレクションのハンドルC' %}
      <a href="{{ collection.url }}">
        <p>{{ collection.title }}</p>
        <p><img src="{{ collection.image | image_url: 300x300 ,crop: 'center' }}"></p>
      </a>
    {% endif %}
  {% endfor %}
</div>

サンプルコード2

<div class="rte">
  {{ page.content }}
</div>
{% endcomment %}
<div class="collections-list-wrap">
  <a href="{{ collections['コレクションのハンドルA'].url }}">
    <p>{{ collections['コレクションのハンドルA'].title }}</p>
    <p><img src="{{ collections['コレクションのハンドルA'].image | image_url: 300x300 ,crop: 'center' }}"></p>
  </a>
  <a href="{{ collections['コレクションのハンドルB'].url }}">
    <p>{{ collection['コレクションのハンドルB'].title }}</p>
    <p><img src="{{ collections['コレクションのハンドルB'].image | image_url: 300x300 ,crop: 'center' }}"></p>
  </a>
  <a href="{{ collections['コレクションのハンドルC'].url }}">
    <p>{{ collections['コレクションのハンドルC'].title }}</p>
    <p><img src="{{ collections['コレクションのハンドルC'].image | image_url: 300x300 ,crop: 'center' }}"></p>
  </a>
</div>

対象となるコレクションが確定していて、表示させる数も順序も決まっているなら、上記のようにしてグローバルオブジェクトのcollectionsにハンドルを指定する形で個別に情報を取得し表示できます。

手法としてはハードコーディングなので柔軟性はありませんが、シンプルな作りなのである意味では無駄がなく、選択肢に入るかもしれません。

別案:公式のサンプルコード

• Feature a subset of collections on a page

上記は、pageテンプレートの作成と、メニューに用いるlinklistオブジェクトを利用する方法です。

メニューの名称と表示させたいページのハンドルを一致させることで必要な分岐を動作させ、あとはlinkオブジェクト内の情報をループしてコレクションを表示する手がかりを取り出している、という感じです。

Shopifyのコレクション絡みでは、割とこのlinklistオブジェクトを用いる方法を見かけることがあります。便利な反面、少々汎用的に使いすぎではという気もしています。別に害があるわけではないと思いますので無駄な懸念だと思いますが。

別案:HTMLとCSSでハードコーディング

• 管理画面のページ投稿ページの入力欄に、HTMLとCSSでコレクションのリストをハードコーディングする

そもそも投稿欄にHTMLを書くことができるのですから、Liquidを使わずともハードコーディングしてしまえばそれで解決できます。

画像は「ファイル」にアップロードするか、コレクションの画像のパスを調べて直書きすることで対応可能です。あとはコレクションのタイトルやリンク先は該当のページを見ればわかるので、構築自体は簡単です。

難点は運用時に毎回HTMLを書かねばならない点ですが、変更点はタイトルと画像のパスとリンク先程度なのでそこまで重労働ではありません。

結び

作成したサンプルコードは最低限の状態に近いので、テーマが元から持っているコレクションリスト用テンプレートに比べると非常に簡素なはずです。
そのため必要な機能や要素が不足している場合は適宜追加する必要があります。

コレクションの指定を半自動化する方法の検討

前出のサンプルコード1をベースにして、いちいち手動でコレクションを指定せずとも概ね自動で表示させることなども可能です。

まず各ページのハンドルには識別に用いる文字列を付与しておき、あとはページのテンプレートで、containsフィルターを使ってページのハンドルに識別用文字列があるかを確認し、removeでその部分を取りいて残った文字列を含むコレクションの配列をwhereフィルターを用いて作成し、forで回して出力するという形です。

この形ならハンドル(ハンドルではなくタイトルやカスタムフィールドの値でも可)で制御できるので、求める数だけテンプレートを作成する必要もありませんし、管理画面内で操作も可能です。

ただしハンドルやタイトルを使う場合は、表示非表示切り替えのために値を変更する可能性を考えると、SEO的にマイナスな影響を引き起こす可能性があります。その点が問題になる場合はカスタムフィールドを使う方法が良いようには思います。

他方、セクションを利用して表示させるコレクションを指定する方法も考えられます。
自動化とは方向が違うのと、カスタマイズの画面を用いないといけないので一手間かかってしまいますが、クライアントが運用することを考えるとセクションを使う方がメリットが大きいかもしれません。