テンプレートエンジンとはテンプレートとなる部分とデータモデルで表現される入力データを合成し、成果ドキュメントを出力するソフトウェア。テンプレートエンジンの主な構成要素として『データモデル』『ソーステンプレート』『成果ドキュメント』が挙げられる。

• 処理タグ: {% 処理 %}
• 出力タグ: {{ 変数 }}
• コメントタグ: {# コメント #}

Twigの処理タグ

処理タグでは変数のセットや条件分岐、配列のループなどで使用。書き方は処理の内容を{%%}で囲む。

EC-CUBE4ではこの他にもテンプレートのインクルードやレイアウトテンプレートで定義したblockの挿入などがある。

// 変数のセット
{% set varName = '変数' %}

// 条件分岐
{% if category == 'カテゴリーA' %}
  // trueの場合の表示
  <p>カテゴリAです</p>
{% else %}
  // falseの場合の表示
  <p>カテゴリA以外です</p>
{% endif %}

// ループ
{% for product in Producst %}
  <h2>{{ product.title }}</h2>
  <p>{{ product.price }}</p>
{% endfor %}

Twigの出力タグ

出力タグは値を表示するためのタグ。PHPのようにechoは使う必要はない。

また、フィルターを使った出力内容をコントロールすることも出来る。

// 変数の出力
{{ varName }}

// ループ中の値を出力
{% for product in Producst %}
  <h2>{{ product.title }}</h2>
  <p>{{ product.price }}</p>
{% endfor %}

// フィルターと合わせて使う
{{ '1234'|reverse }}
{# outputs 4321 #}

// １行コメント
{# コメント #}

// 複数行コメント
{# 複数行の
コメント
もかける
#}

// コードをコメントアウト
{# このコメントないのコードは実行されません
{% if category.posts %}
    This category has posts
{% endif %}
#}

TwigのBlockタグはベースとなるレイアウトテンプレートで定義した位置にコードを挿入できるもの。

EC-CUBE4のdefault_frame.twigではstyle、javascript、mainにコードを挿入できる。

各ページのテンプレートで必要なコードを記述すれば自動的に挿入される。

// index.twig
{% block main %}
  <div class="ec-sliderRole">
    <div class="main_visual">
      <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc01.jpg') }}"></div>
      <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div>
      <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc03.jpg') }}"></div>
    </div>
  </div>
{% endblock %}

includeタグで別ファイルで作ったコンテンツの挿入

先ほどのBlockだけだとメインエリアのコード量が多くなってしまうので、分割したければ、includeタグを使用。

{% block main %}
  {% include Product/detail.twig %}
  {% include Product/cart.twig %}
  {% include Product/review.twig %}
{% endblock %}

このタグと条件分岐を使えば指定した条件（例えばカテゴリ）で表示を切り替えるということも簡単にできるようになる。