Shopifyで、トップページに商品のタグ一覧を重複なしで表示する方法の解説記事です。
かなりピンポイントの話ですが、一般化すると以下のようになるかと思います。
Liquidテンプレートにおいて、配列の中で重複したものを削除して表示する方法
PHPで言うところのarray_uniqueにあたります。
» array_unique
Liquidでは同じような処理がなく、少し遠回りしなければなりません。
今回は、「Liquidで配列を作る、要素を追加する」を参考にさせてもらいました。
Liquidテンプレートには癖があり、慣れるまではひと苦労です。
以下の２つは、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を使用して語尾に足していっている感じです。
それぞれのタグの間には,を入れています。
不要なカンマを削除
,は１番最初のタグの前にも付いてしまっているので、それを除去します。
{% 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を１つずつ表示していきます。
<a href="/collections/all/{{ tag }}">とすることで、タグをクリックすると、そのタグの一覧に飛ぶようになります。
以上で完成です＼(^o^)／
【まとめ】トップページに商品のタグ一覧を表示する方法【shopify】
今回は、Shopifyのトップページに、商品のタグ一覧を重複なしで表示する方法を解説しました。
Liquidテンプレートに慣れるまでは大変ですが、今回思い通りの実装ができて楽しかったので、もっと勉強して使いこなせるようになりたいですね。
今回解決できた経緯として、PHPだったらこうやるな…という様に考えて応用できたので、まずは慣れている言語で考えてみると良いのかもしれません。
以上です。最後までお読みいただき、ありがとうございました。
最後に宣伝
ココナラで、コーディングの相談を受け付けています。
- CSSが上手く作れない
- JavaScriptが思ったように動かない
- ブログのデザインを修正したい
- 勉強中でわからないところがあるから教えてほしい
このようなお悩みを解決していますので、「こんなの解決できる？」ということがあったら、ぜひ質問だけでも以下のリンクよりどうぞ。
コメント