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

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

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

• Twig まとめ(1)　～継承やブロックについて～
• Twig まとめ(3)　～ trans / nl2br / escape / raw / price ～
• Twig まとめ(4)　～ マクロについて ～

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

if 文の使い方

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

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

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

複数条件を設定する場合は、条件を「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 %}

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

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から変数として値を渡すことができますが、Twig側で変数を用意することもできます。

{% set %} で変数を設定

{% set 変数 = 値 %}

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

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

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

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

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

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

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

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

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

同じ変数が複数セットされた場合、通常は後に書かれた内容で変数が上書きされてしまいます。
が、このように {% with %} でスコープが設定されている場合は、スコープ内外で同じ変数を使い分けられます。

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