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

Twigテンプレートの代表的な特殊タグについて解説
  • {% if %} や {% for %} の使い方
  • {% set %} や {% with %} で変数を扱う方法

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

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

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

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

目次

if 文の使い方

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

ifの後にある条件 = 真(true)であれば、{% endif %}までに書かれた内容が表示されます。
以下のように記述することで、elseなども実装できます。

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

EC-CUBEでの実装例(1):商品の表示・非表示の制御

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

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

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

EC-CUBEでの実装例(2):商品価格表示の制御

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>
表示内容

価格1:2000円
価格2:1000円

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

{% with %} 内部でセットした変数を、以下のように{% with %} 外部で使おうとするとエラーになります。

{% with %}
  {% set price = 1000 %}
{% endwith %}
<p>価格:{{ price }}円</p>
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次