コレクション一覧にタグで絞るボタン表示させる方法について。各タグを持つを商品の数も横に表示されます。
会社の備品注文でお世話になっているASKULさん。注文だけでなく、サイトのユーザービリティも参考にさせていただいております。
先日も年末掃除の用品を購入するためASKULさんを使っていましたが、目に入ってきたのは、カテゴリーページ内にタグのボタンが設置され、それを押すと絞り込みができるという設計。
早速、Shopifyストアにも応用してみたので、その方法を共有したいと思います。
こんなイメージ
Shopifyストアでカテゴリーページとしてよく使われるのが、デフォルトの「コレクション」ページではないかと思います。
コレクションページは、様々な絞り込みができ、例えば、
・在庫有無
・価格
・種類
などで、探していた商品にたどり着く導線の短縮が期待できます。
今回は、そんなデフォルト機能に加え、「タグ」で絞り込む機能を追加したいと思います。
まず、コレクションページが開いたら、そのコレクションに属する商品が持つ、すべてのタグがボタン形式で表示される。
また、タグ名の隣には「(12)」と、商品の数も表示されている‥というのが今回のゴールになります。
セクションを作成
タグボタンは、タグクラウドのような感じで表示されますが、個別セクションを作成してテーマエディタ(ビジュアルエディタ)で、コレクションページに追加する方式になります。
サンプルコード
では、早速作成するセクションのサンプルコードを見ていきましょう。
{% schema %}
{
"name": "コレクション商品のタグで絞りこむ",
"presets": [
{
"name": "コレクション商品のタグで絞りこむ"
}
]
}
{% endschema %}
<ul>
{% for tag in collection.all_tags %}
{% assign tag_count = 0 %}
{% for product in collection.products %}
{% if product.tags contains tag %}
{% assign tag_count = tag_count | plus: 1 %}
{% endif %}
{% endfor %}
<li><a href="{{ collection.url }}/{{ tag }}">{{ tag }}</a> ({{ tag_count }})</li>
{% endfor %}
</ul>では、主要コードを解説いたします。
①まず「for文」を使って表示中のコレクションのタグを1個ずつ取り出します。
②カウンター変数({% assign tag_count = 0 %})を初期化（0）します。
③「for文」を使って表示中のコレクションに属する商品を1個ずつ取り出します。
④「if文」を使って、取り出された「商品」が持つタグの中で、上の階層({% for tag in collection.all_tags %} )で取り出された「タグ」と一致すれば、
⑤カウンター変数が「1」ずつインクリメントしていきます。({% assign tag_count = tag_count | plus: 1 %}
コレクションに属する商品を、さらにタグで絞った一覧ページのURLは「コレクションURL/タグ名」になります。そのため、各タグには、{{ collection.url }}/{{ tag }}とリンク要素を実装します。
そして、タグ名({{ tag }})と、インクリメントが完了した数、すなわち「同タグを持つ商品の数」がその横に表示されます。
ひとつ問題が発生
この手順で、コレクションページにてタグが設置され、それを押すと「タグで絞り込まれたコレクションの商品一覧」が表示されます。
ただ、1つ問題が‥実は、「タグで絞り込まれた」ページは独自のテンプレートを持っておらず、コレクションページに従属している、いわば「子供」なのです。
そのため、「タグで絞り込まれた」ページにもタグボタンが表示されてしまいます。しかも、「タグで絞り込まれた」商品が持つタグと数のみ表示されるため、本来の用途を満たさない･･
よって、タグ非表示にしておく必要があります。
方法は簡単。「タグページのURLとハンドルであれば、非表示にする」と条件分岐をすればOKです。
いか、サンプルコードです。
<ul>
{% for tag in collection.all_tags %}
{% assign tag_count = 0 %}
{% for product in collection.products %}
{% if product.tags contains tag %}
{% assign tag_count = tag_count | plus: 1 %}
{% endif %}
{% endfor %}
{% assign current_tag_url = '/collections/' | append: collection.handle | append: '/' %}
{% if request.path contains current_tag_url %}
<!--ストアURL/collectuons/collection.handleの後ろに「/」がついている場合は非表示 -->
{% continue %}
{% endif %}
<li>
<a href="{{ current_tag_url }}{{ tag }}">{{ tag }}</a> ({{ tag_count }})
</li>
{% endfor %}
</ul>コレクションページのURLとハンドルは「ストアURL/collection/コレクションハンドル」になります。
一方、タグページのURLとハンドルは「ストアURL/collection/コレクションハンドル/タグ名」となっており、シンプルに「/」の有無によって条件分岐ができるわけです。
{% assign current_tag_url = '/collections/' | append: collection.handle | append: '/' %}
{% if request.path contains current_tag_url %}こちらのコードのように、現在のURLハンドルに「/」がついている場合は、コレクションページではなく、「タグで絞り込まれた」ページと判定し、{% continue %}を使って、処理をスキップ(非表示)します。
※{% continue %}の役割に関してもっと知りたい方は、以下の記事をご一読ください。
【Liquid基礎】ループのスキップに用いる {% continue %} を理解するための最もシンプルなコード
以上、Shopifyストアのコレクション一覧にタグで絞るボタン表示させる方法について紹介しました。ぜひご活用ください！
