【Shopify】タグ一覧をリンク付きで表示する方法（トップページ、商品詳細ページ）重複なし!

まる

2023年1月16日 06:29

先日、Shopifyでリンク付きタグ一覧を表示する機会があったので、備忘を兼ねてコードを載せておきたいと思います。
基本的にコピペで使えるので参考にしてもらえると！
もっとスマートな書き方あるよって方はコメントくださると嬉しいです。

Shopifyのタグとは

Shopifyのタグは、商品に紐づけることができるもので、商品管理ページのうち下図の場所で管理しているものです。

サイトで使っているタグ全部を出したい時

まずは、とにかくタグ全てを出力したいとき。
トップページなどで使える。もちろん重複は排除しています。

{% assign tag_list = "" %}
{% paginate collections.all.products by 1000 %}
  {% for product in collections.all.products %}
    {% for tag in product.tags %}
      {% assign tag_list = tag_list |  append: "," | append: tag %}
    {% endfor %}
  {% endfor %}
{% endpaginate %}

{% assign tag_list = tag_list | remove_first: "," %}
{% assign tag_array = tag_list | split: "," | uniq %}

<div class="tagsWrap">
  <ul class="search_tags">
    {% for tag in tag_array %}
      <li class="search_tagItem"><a href="/collections/all/{{ tag | handleize }}">{{ tag }}</a></li>
    {% endfor %}
  </ul>
</div>

空の配列作る（assignのところ）
ひとまず全てのタグを配列に入れる
全部の商品ループ内で商品タグループを回す
不要なカンマを排除
新しい配列を作る
uniqで重複を排除しておく
タグ一覧を表示

ちなみに！！

{% paginate collections.all.products by 1000 %}

↑コレ。めっちゃ大事すぎるので、別記事で詳細書いてます。
とにかく絶対必要な１行。

商品に紐づくタグのみ出力したい時

<ul class="tagList">  
  {% for tag in product.tags %}
  <li>    
    {% capture url %}/collections/all/{{tag | handle}}{% endcapture %}
    {{ tag | link_to:url }}
  </li>
  {% endfor %}
</ul>

先ほどよりシンプルです。
コレを商品詳細ページに置けば、商品に紐づいてるタグのみ出力されます。
商品詳細ページへの置き方がわかんないって方は、また別記事で書きますので少々待ってください！

タグの有無を確認（条件分岐）して見出しを出したい

商品詳細ページにタグを出すときに、ついでに実装したくなるのが見出しの表示です。

タグがあれば「関連タグ」とかの見出しを出したい。でも、紐づくタグがない場合は、見出しは非表示にしたい。
そんなときは、↓のコードで分岐できます。

{% if product.tags.size > 0 %}
  <h3 class="product-recommendations__heading">関連タグ</h3>
{% endif %}

タグが0より大きいかどうか、つまりタグの有無を分岐しています。

Shopify、勉強中なのですがWPよりも複雑というか分かりづらいですよね…
ググってたらすぐに英語のページに飛ばされちゃうし。

自分で実装したものなのに、忘れちゃうことが多いので、忘れないうちに備忘として書き留めていけたらなーと思っています。