更新日: 2022 / 07 / 10

EC-CUBE4カスタマイズ初心者のためのTwig入門

EC-CUBE4にはTwigというテンプレートエンジンが使われています。HTMLとの違いは、データベースから送られてきたデータ(商品情報など)を変数タグなどを使って直接表示できるところ。

Wordpressを使ったことがある人ならそれほど難しくないのでサクッとTwigをマスターしちゃいましょう!

今すぐ使える!Bootstrap4対応 格安レスポンシブテンプレート公開中

Bootstrap4に対応したレスポンシブテンプレートを公開しています。あらかじめデザインされたUIブロックを多数同梱しているので、面倒なコーディングなしに今すぐショップを構築したい方におすすめ。

-> 詳細はこちら

Twigとは?

TwigはEC-CUBE4で採用されているテンプレートエンジン。商品一覧データの表示、ifやforを使った構文など通常のHTMLではできないような処理を行うことができます。

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

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

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

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

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 #}

Twigのコメントタグ

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

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

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

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

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

HTMLのコメントタグだと処理されたソースコードが出力されてしまいますが、Twigのコメントタグを使うことで処理も防ぐことができます。

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だけだとメインエリアのコード量が多くなってしまうので、分割したいと思うかもしれません。そんな時に使えるのがincludeタグ。

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

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

まとめ

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

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