【Shopify】トップページに商品のタグ一覧を表示する方法【重複なし】

CODE

Shopifyで、トップページに商品のタグ一覧を重複なしで表示する方法の解説記事です。

かなりピンポイントの話ですが、一般化すると以下のようになるかと思います。

Liquidテンプレートにおいて、配列の中で重複したものを削除して表示する方法

PHPで言うところのarray_uniqueにあたります。
» array_unique

Liquidでは同じような処理がなく、少し遠回りしなければなりません。

今回は、「Liquidで配列を作る、要素を追加する」を参考にさせてもらいました。

Liquidテンプレートには癖があり、慣れるまではひと苦労です。

以下の2つは、Liquidを理解するのに必須のサイトです。

この記事を書いている私(わや@wayasblog)は、Web制作会社でエンジニアとして働いています。

最近ShopifyでECサイトを構築する案件があり、重複なしの配列を作るのになかなか苦戦したので、備忘録として書いておきます。

スポンサーリンク

トップページに商品のタグ一覧を重複なしで表示する方法

結論は、以下のように書けば動きます。

{% assign tag_list = "" %}

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

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

<ul>
	{% for tag in tag_array %}
		<li><a href="/collections/all/{{ tag }}">#{{ tag }}</a></li>
	{% endfor %}
</ul>

これをテーマのSectionsフォルダにtags.liquidなどと作成すればOKです。

詳しく解説していきます。

空の配列を作成

まず、すべてのタグを格納するための空の配列を作ります。

{% assign tag_list = "" %}

assignというのは、JavaScriptで言うところのvarのようなものです。

すべてのタグを配列に格納

次に、ひとまずすべてのタグを最初に作った配列に格納していきます。

ここでは、まだタグは重複して格納されています。

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

すべての商品でループを回し、さらにその中で商品のタグでループを回しています。

Liquidには、PHPで言うところのarray_pushがないので、appendを使用して語尾に足していっている感じです。

それぞれのタグの間には,を入れています。

不要なカンマを削除

,は1番最初のタグの前にも付いてしまっているので、それを除去します。

{% assign tag_list = tag_list | remove_first: "," %}

タグの後ろに,をつけて、最後のカンマを取るという処理も可能かもしれませんね。

{% assign tag_list = tag_list | remove: "," %}

新たな配列を作成

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

ここの処理は、tag_list,区切りで分けて配列にしています。

最後のuniqがポイントで、同じ要素を取り除いてくれます。

これで重複なしのタグが格納された配列が完成しました。

タグ一覧を表示

表示方法はそれぞれ自由ですが、一例を載せておきます。

<ul>
	{% for tag in tag_array %}
		<li><a href="/collections/all/{{ tag }}">#{{ tag }}</a></li>
	{% endfor %}
</ul>

重複なしのタグの配列tag_arrayを1つずつ表示していきます。

<a href="/collections/all/{{ tag }}">とすることで、タグをクリックすると、そのタグの一覧に飛ぶようになります。

以上で完成です\(^o^)/

【まとめ】トップページに商品のタグ一覧を表示する方法【shopify】

今回は、Shopifyのトップページに、商品のタグ一覧を重複なしで表示する方法を解説しました。

Liquidテンプレートに慣れるまでは大変ですが、今回思い通りの実装ができて楽しかったので、もっと勉強して使いこなせるようになりたいですね。

今回解決できた経緯として、PHPだったらこうやるな…という様に考えて応用できたので、まずは慣れている言語で考えてみると良いのかもしれません。

以上です。最後までお読みいただき、ありがとうございました。

最後に宣伝

ココナラで、コーディングの相談を受け付けています。

  • CSSが上手く作れない
  • JavaScriptが思ったように動かない
  • ブログのデザインを修正したい
  • 勉強中でわからないところがあるから教えてほしい

このようなお悩みを解決していますので、「こんなの解決できる?」ということがあったら、ぜひ質問だけでも以下のリンクよりどうぞ。

HTML / CSS / JSのお悩みを解決します コーディングでお困りの方はお気軽にお問い合わせください! | Webサイト修正・カスタム・コンサル | ココナラ
HTML / CSS / JavaScript(jQuery)のお悩み相談、ご質問を受け付けます。「CSSが上手く作れない」「JavaScriptが思ったように...

コメント

タイトルとURLをコピーしました