EC-CUBE4にはTwigというテンプレートエンジンが使われています。

Twigはたった3つのタグを覚えればOK

Twigのタグで覚える必要があるのは次の3つだけ。

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

これらについて詳しくはTwig公式ドキュメントをご覧ください。ここではこの3つについて簡単に解説した後、EC-CUBE4でよくあるTwigの使い方をまとめていきます。

Twigのタグ1: 処理タグ

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

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のタグ2: 出力タグ

出力タグは値を表示するためのタグ。PHPのようにechoは使う必要ありません。

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

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

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

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

Twigのタグ3コメントタグ

コメントタグはソースコードにコメントを記述するためのタグ。画面やDevtoolsなどにも表示されません。

また、Twigのコードをコメントアウトすることで実行させないようにすることもできます。

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

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

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

EC-CUBE4で使うTwig

Blockタグ

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

EC-CUBE4のdefault_frame.twigではstylejavascriptmainにコードを挿入できます。

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

// 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 %}

別ファイルに作ったコンテンツの挿入

先ほどのBlockだけだとメインエリアのコード量が多くなってしまうので、分割したいと思うかもしれません。そんな時に使えるのがincludeタグ。

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

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

まとめ

Twigはバックエンドとフロントエンドを切り離せるので、デザイナーにとっても使いやすいテンプレートエンジン。

新着商品一覧や売れ筋商品はバックエンドのプログラミングが必要ですが、UICubeを使えば、プログラミング部分ができているのでTwigのみで表示のカスタマイズが可能です。