Shopify Liquidの「空の変数」を使って、条件にあう要素の配列を作成する方法について考察してみたいと思います。
以前、ShopifyのLiquidの変数を応用したちょっとした小技を紹介しました。興味のある方はぜひご一読ください。
【Shopify Liquid】ループの記録係！1回のみ実行に有用な「フラグ(Flag)」サンプルコード
【Shopify Liquid】ループ内の「回数記録係」カウンター変数について
今回は「空の変数」を使って、条件にあう要素の配列を作成する方法について考察してみたいと思います。
空の変数とは
「空の変数」とは文字どおり、
{% assign variable = "" %}
のように、変数に格納する値が「空」の変数を指します。
変数の値を空にしておき（初期化）、条件にあう要素が現れたら変数の値が追加される仕組みとしてよく使われます。
例えば、今回の例題のように、
①「キャンプ用品」というコレクションに属する商品の中で → 空の変数を使って初期化
②在庫がある商品があれば、→ 変数に商品のタイトルをどんどん追加する
③最終的に在庫のある商品のタイトルすべてが変数に格納しリスト完成
というシーンで活用されます。
サンプルコード
では、上記の例のサンプルコードを見てみましょう。
{% assign available_titles = "" %} //初期化
{% for product in products %}
{% if product.available %} //在庫のある商品であれば、
{% if available_titles == "" %} //初期化の状態(1回目のループ)であれば、
{% assign available_titles = product.title %} //変数に1回目ループの商品のタイトルを格納
{% else %} //2回目ループ以降であれば
{% assign available_titles = available_titles | append: ", " | append: product.title %} //商品タイトルを「,」を挟んみながら追加
{% endif %}
{% endif %}
{% endfor %}
<p>在庫のある商品一覧: {{ available_titles }}</p>このコードには２つの条件分岐が施されています。
①在庫のあるもの（product.available）
②まだ初期化(空)変数(available_titles == "")
1回目のループは「空の状態」であるため、商品タイトルが格納されますが、2回目以降は、既存の商品タイトルに条件にあう（在庫のある商品）が次から次へと「,」を挟みながら追加されます。
HTMLは以下のように(例文)表示されます。
<p>在庫のある商品一覧：焚き火三脚 , ランタン , シュラフ</p>リストにリンクを付けたい
在庫のある商品リストは表示されるものの、タイトルの配列にすぎます。
商品のリンク付きの配列にしたい場合は、以下のようなコードで実装できます。
{% assign available_titles = "" %}
{% for product in products %}
{% if product.available %}
{% assign product_link = "<a href='" | append: product.url | append: "'>" | append: product.title | append: "</a>" %}
{% if available_titles == "" %}
{% assign available_titles = product_link %}
{% else %}
{% assign available_titles = available_titles | append: ", " | append: product_link %}
{% endif %}
{% endif %}
{% endfor %}
<p>在庫のある商品一覧: {{ available_titles }}</p>まず、リンク付きの商品タイトルを任意の変数(product_link)に格納し、2回目ループ以降はそれが追加される仕組みです。
この「空の変数」を活用すると、特定のコレクションに属する商品が持つタグを重複なしでリスト化する事も可能です。
以下の記事にてその活用法を紹介しておりますので、ぜひご一読ください。
