Liquidの「空の変数」を使って、条件にあう要素の配列(リスト)を作成する方法！2回目の記事として重複しないコレクションの商品タグリストを作ってみたいと思います。
先日「空の変数」を使って、条件にあう要素の配列を作成する方法について紹介しました。
【Shopify Liquid】在庫のある商品リスト(配列)を作る「空の変数」について
「空の変数」とは、{% assign variable = "" %}のように「値を格納しない変数」の事。ループ内で条件にあう要素があれば、その値を更新するため、在庫のある商品リスト(配列)作成などで活用されます。
今回は「空の変数」を応用し、重複しないコレクションの商品タグリストを作ってみたいと思います。
こんなイメージ
「サッカー用品」というコレクションに属する商品は3点あるとしましょう。それぞれは以下のようなタグを持っています。
①サッカーボール：小学生用、セール中
②サッカーシューズ：セール中、アディダス
③ゴールキーパーグローブ：小学生用、ナイキ
商品は違えど、タグは重複するため、「サッカー用品」というコレクションに属する商品のタグを、ループ(for文)を使ってリスト化すると「小学生用」「セール中」が2回出現する事になります。
ここで「空の変数」を使って、重複しないタグリストを作るのが、今回のゴールになります。
サンプルコード
まず、一般的にタグのリストを作るコードを見てみましょう。
<ul>
{% for product in collections['soccer-goods'].products %}
{% for tag in product.tags %}
<li>{{ tag }}</li>
{% endfor %}
{% endfor %}
</ul>ただ、このコードだと、上述したように「小学生用」「セール中」が重複出現します。
では、重複しないリストを作るサンプルコードをご紹介します。
{% assign unique_tags = "" %} //①空の変数で初期化
{% for product in collection['soccer-goods'].products %}
{% for tag in product.tags %}
{% unless unique_tags contains tag %} //②すでに存在するタグを除外する条件分岐
{% assign list_tag = "<li>" | append:tag | append:"</li>" %} //②<li>を付ける
{% if unique_tags == "" %} //④1回目のループのみ（もしくは、1個目のタグが現れるまで）
{% assign unique_tags = list_tag %}
{% else %}
{% assign unique_tags = unique_tags | append:list_tag %} //⑤2回目以降のループから変数の値を更新
{% endif %}
{% endunless %}
{% endfor %}
{% endfor %}
<ul>
{{ unique_tags }}
</ul>では、こちらのコードについて解説します。
①{% assign unique_tags = "" %}と空の変数を作って初期化する
②タグを取り出すループを開始。{% unless unique_tags contains tag %}で、取り出したタグが変数「unique_tags」に含まれていない事を条件にする。→すでに含まれているタグだと、重複してしまうため。
③{% assign list_tag = "
" %}/code>と、リストタグ(li)は実装したタグを変数に格納
④{% if unique_tags == "" %}は、1回目ループもしくは1個目のタグが現れるまで。要するに「unique_tags」という変数に「まだ何も格納されていない」状態を指す
⑤{% else %}{% assign unique_tags = unique_tags | append:list_tag %}と、「unique_tags」という変数に何かしら要素が格納されていたら、unique_tags | append:list_tagと、既存の要素にどんどん追記(更新)していく
ループ内で「unique_tags」に含まれていないタグを次々と追加していく事により、タグの重複を避けてリストを作成する事が可能になります。
タグにリンクを付けたい
以下は、タグリストの各タグにリンクを付けるサンプルコードになります。
{% assign unique_tags = "" %}
{% for product in collection['soccer-goods'].products %}
{% for tag in product.tags %}
{% unless unique_tags contains tag %}
{% assign tag_link = "<a href='/collections/all/" | append: tag | append: "'>" | append: tag | append: "</a>" %}
{% assign list_tag = "<li>" | append: tag_link | append: "</li>" %}
{% if unique_tags == "" %}
{% assign unique_tags = list_tag %}
{% else %}
{% assign unique_tags = unique_tags | append: list_tag %}
{% endif %}
{% endunless %}
{% endfor %}
{% endfor %}
<ul>
{{ unique_tags }}
</ul>いかがでしょうか。以上、Liquidの「空の変数」を使って、条件にあう要素の配列(リスト)を作成する方法について考察してみました。
もちろん、{% for tag in collection.all_tags %}を使って、コレクション内の重複しないタグリストを作成する事も可能です（以下の記事をご一読ください）。
【Shopify小技】コレクション一覧にタグで絞るボタン表示（+タグの商品数の表示も）
が、「空の変数」の学習に最適なので、紹介いたしました。ぜひ活用してみてください！
