【EC-CUBE 4】Twig まとめ(2)　～ if / for / set / with ～

2025年2月12日

{% if %} や{% for %} の使い方
{% set %}や {% with %}で変数を扱う方法

本記事では、Twigテンプレートでよく使われる、代表的な特殊タグ4つについて纏めています。

EC-CUBE 4で用意されているTwigテンプレートを元に説明しているので、実際にコードを弄りながら見てみると理解が早いかもしれません。

なお、Twigについては以下記事でも纏めていますので、合わせてご覧ください。

【動作環境】
EC CUBEのバージョン：4.3.0
サーバー：XServer

if 文の使い方

{% if 条件 %}
　  〜〜表示内容〜〜
{% endif %}

ifの後にある条件 = 真（true）であれば、{% endif %}までに書かれた内容がブラウザに表示されます。
以下のように記述すればelseも実装できます。

{% if 条件(1) %}
　  〜〜表示内容(A)〜〜
{% elseif 条件(2) %}
　  〜〜表示内容(B)〜〜
{% else %}
　  〜〜表示内容(C)〜〜
{% endif %}

条件(1) = true → (A)が表示　※BとCは表示されない
条件(1) = false かつ条件(2) = true → (B)が表示　※AとCは表示されない
条件(1) = false かつ条件(2) = false → (C)が表示　※AとBは表示されない

複数条件を設定する場合は、条件をandやorで繋ぎます。

{% if 条件(1) and 条件(2) %}
　  〜〜条件(1)(2)両方を満たす場合に表示する内容〜〜
{% endif %}

{% if 条件(1) or 条件(2) %}
　  〜〜条件(1)(2)いずれかを満たす場合に表示する内容〜〜
{% endif %}

条件に合致しない場合を設定したいときは、is notを使います。

{% if x is not y %}
　  〜〜 x が y でない場合に表示する内容〜〜
{% endif %}

EC-CUBEでの実装例（１）：商品の表示・非表示の制御

商品の公開ステータスに応じて商品を表示したり非表示にしたりできます。

{% if Product.status.id == 1 %}
  <p>ID: {{ Product.id }}<p>
  <p>{{ Product.name }}</p> 
{% endif %}

このように記述すると、{{ Product }}に格納されている商品の公開ステータスが「1」の場合にのみ、商品のIDと名前が表示されるようになります。

より詳細なコードはこちら

【EC-CUBE 4】公開状態に応じて商品を非表示にする方法本サイトでは、以下のような特定条件に合った商品のみを表示するページやブロックの作り方を紹介してきました。特定のタグを付けた商品のみを表示するページ自動更新…

EC-CUBEでの実装例（２）：商品価格表示の制御

1つの商品に複数の規格を設定することで、複数の価格を持たせることができます。
以下のようにif文を用いると、商品が複数の価格を持っているかいないかで価格の表示方法を変えられます。

{% if Product.hasProductClass %}
  {% if Product.getPrice02Min == Product.getPrice02Max %}
    {{ Product.getPrice02IncTaxMin|price }}
  {% else %}
    {{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}
  {% endif %}
{% else %}
  {{ Product.getPrice02IncTaxMin|price }}
{% endif %}

商品一覧ページなどで見られる記法で、以下のような意味になります。

Product.hasProductClassがtrue、つまり商品が複数規格持っていれば{% else %}までを表示。
持っていなければ{% else %}〜{% endif %}までを表示する。
Product.hasProductClassがtrueの場合はさらに以下のif文が続く。
- Product.getPrice02Min == Product.getPrice02Maxのとき、つまり複数規格の中で価格が最も低いものと最も高いものが同じ場合（規格が複数あるけど価格はすべて同じ場合）は、{{ Product.getPrice02IncTaxMin|price }}を表示する。
- 価格が異なる場合は、{{ Product.getPrice02IncTaxMin|price }}～{{ Product.getPrice02IncTaxMax|price }}を表示する。（『最安値〜最高値』という表示）

for 文の使い方

{% for 変数 in 配列 %}
　  〜〜繰り返し表示する内容〜〜
{% endfor %}

PHPのforeachに相当する構文で、配列の要素を1つずつ取り出して変数に格納し、要素の数だけ表示を繰り返します。

EC-CUBEでの実装例：複数の商品を表示

Controllerから渡された複数の商品情報を表示する場合、for文を用いることで簡潔に書くことができます。

<ul class="ec-shelfGrid">
  {% for Product in Products %}
    <li class="ec-shelfGrid__item">
      <p class="ec-shelfGrid__item-image">
        <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}">
      </p>
      <p>ID: {{ Product.id }}</p>
      <p>{{ Product.name }}</p>
      <p>{{ Product.getPrice02IncTaxMin|price }}</p>
    </li>
  {% endfor %}
</ul>

これも商品一覧ページなどで見られる記法で、以下のような意味になります。

Controllerから渡された変数Productsに格納された要素（商品情報）を、Productとして1つずつ取り出し、画像・ID・名前・価格を表示。
「<ul>タグ→for文→<li>タグ」と記述することで、商品数分の<li>タグが生成される。
- <li>タグを複数記述する必要がない。
- 渡される商品数が変わってもTwigファイルを修正する必要がない。

変数の使い方

商品情報など、Controllerから変数として値を渡すことができますが、Twig側で変数を用意することもできます。

{% set %} で変数を設定

{% set 変数 = 値 %}

このように記述すると、指定した変数に特定の値が代入されます。
代入した値を表示するには{{ 変数 }}と書きます。

以下のように、簡単な計算結果を表示するときなどに便利です。

{% set price = 1000 %}
<p>税抜価格：{{ price }}円 </p>
[% set priceIncTax = price * 1.1 %}
<p>税込価格：{{ priceIncTax }}円</p>

表示内容

税抜価格：1000円
税込価格：1100円

値の部分には数式を使うこともできるので、このように税込価格を表示するときなどに役立ちます。

{% with %} でスコープを設定

変数を作成する場合、いっしょに覚えておきたいのが{% with %} です。
これを使うことで、変数が使用できる範囲を指定できます。

{% with %}
  〜〜スコープ内〜〜
{% endwith %}

{% with %}〜{% endwith %}内でセットされた変数は、この中だけでしか使えないようになり、変数のバッティングを防ぐことができます。

{% set price = 1000 %}
{% with %}
  {% set price = 2000 %}
  <p>価格1：{{ price }}円 </p>
{% endwith %}
<p>価格2：{{ price }}円</p>