{% for %}とセットで使用される{% else %}について紹介いたします。{% else %}は、ループが一度も実行されない場合の処理を行う役割を持っています。
Shopifyの開発言語Liquidで、カスタマイズ頻度が最も多いのが「for文」だと思います。
商品(Product)やブログ記事(Article)、注文(order)などの要素を取得・表示するためのループ(繰り返し処理)を作成するためによく使われております。
本サイトでは以前、「for文」を理解するための用法やサンプルコードなどを紹介しました。
Shopify Liquid for文とif文「 繰り返し実行」or「１度だけ実行 」
今回は、「for文」の{% for %}とセットで使用される{% else %}について紹介いたします。
{% for %} – {% else %}構文
{% for %}と{% else %}は、「for文(ループ)」が一度も実行されない場合(該当するものがない場合)、特定のメッセージを表示することができます。
例えば、特定の条件を持つ商品がない場合、「該当する商品がごさいません」のようなテキスト表示ができます。
サンプルコード
以下はサンプルコードです。
{% for article in blog['news'].articles %}
<h2>{{ article.title }}</h2>
<p>{{ article.excerpt }}</p>
{% else %}
<p>記事がありません。</p>
{% endfor %}こちらは、「news」というブログの記事の一覧を作成するループ。該当する記事があれば、記事のタイトル(article.title)と記事の抜粋(article.excerpt)が表示されるが、もしなければ「記事がありません」というテキストが表示されます。
{% for article in blog['news'].articles %}
{% if article.tags contains "新商品" %}
<div class="article">
<h3>{{ article.title }}</h3>
<p>{{ article.excerpt }}</p>
</div>
{% endif %}
{% else %}
<p>新商品情報がありません。</p>
{% endfor %}こちらは「新商品」というタグを持つ記事があれば、タイトルと抜粋が表示されるが、該当する記事がなければ「新商品情報がありません」という表示されます。
では、以下のコードと比較してみてください。
{% for article in blog['news'].articles %}
{% if article.tags contains "新商品" %}
<div class="article">
<h3>{{ article.title }}</h3>
<p>{{ article.excerpt }}</p>
</div>
{% else %}
<p>新商品情報がありません。</p>
{% endif %}
{% endfor %}一見「同じ結果になるのでは？」と思ってしまいがちですが、両コードには大きな違いがあります。
上のコードが、１つでも「新商品」というタグを持つ記事があれば、「新商品情報がありません」というテキストは表示されませんが、下のコードは、各記事に対してチェックが行われるので、「新商品情報がありません」が複数回出力されます。
こんな応用も
以前、別の記事で商品ページに同じタグを持つブログ記事の表示方法について紹介いたしました。
同記事では、該当するブログ記事がなかった場合に用いるコードを紹介しておりますが、{% for %} – {% else %}構文が登場するので、興味があればぜひご一読くださいませ。
