EC-CUBE4で使われているTwigの使い方を解説します。EC-CUBE4をカスタマイズするならTwigの知識は必須。if文やループ処理をしたり、コメントアウトする方法など基本的なところに加えて、EC-CUBE4で使えるBlockタグの使い方も解説します。
Wordpressを使ったことがある人ならそれほど難しくないのでサクッとTwigをマスターしちゃいましょう！
Twigとは？
TwigはEC-CUBE4で採用されているテンプレートエンジン。Wordpressのようにテンプレートにデータ処理を書くのではなくHTMLとロジックを分けて記述します。
処理を書かないと言ってもデータの表示や条件分岐、フィルターの使用ができるのでテンプレート内だけでもある程度データの操作が可能です。
EC-CUBE4ではショップ情報の表示や、商品情報の表示に使われています。
Twigはたった３つのタグを覚えればOK
Twigのタグで覚える必要があるのは次の３つだけ。
- 処理タグ:
{% 処理 %} - 出力タグ:
{{ 変数 }} - コメントタグ:
{# コメント #}
これらについて詳しくはTwig公式ドキュメントをご覧ください。ここではこの３つについて簡単に解説した後、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ファイルから商品やニュースなどのデータを取得する方法については以下の記事をご覧ください。
-> EC-CUBE4でブロックやテンプレートから必要なデータを取得する方法
Twigでコメントアウトするタグ
コメントタグはソースコードにコメントを記述するためのタグ。画面やDevtoolsなどにも表示されません。
また、Twigのコードをコメントアウトすることで実行させないようにすることもできます。
// １行コメント
{# コメント #}
// 複数行コメント
{# 複数行の
コメント
もかける
#}
// コードをコメントアウト
{# このコメントないのコードは実行されません
{% if category.posts %}
This category has posts
{% endif %}
#}HTMLのコメントタグだと処理されたソースコードが出力されてしまいますが、Twigのコメントタグを使うことで処理も防ぐことができます。
EC-CUBE4で使うTwig
Extendsタグ
extendsではそのページで使うベーステンプレートを選択することができます。
例えばデフォルトテンプレートで使われているのはこちらのようなコード。
{% extends 'default_frame.twig' %}これを変えることでページごとにベーステンプレートを分けることもできます。
Blockタグ
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 %}-> 参考記事: Blockの作り方
includeタグで別ファイルで作ったコンテンツの挿入
先ほどのBlockだけだとメインエリアのコード量が多くなってしまうので、分割したいと思うかもしれません。そんな時に使えるのがincludeタグ。
{% block main %}
{% include Product/detail.twig %}
{% include Product/cart.twig %}
{% include Product/review.twig %}
{% endblock %}このタグと条件分岐を使えば指定した条件（例えばカテゴリ）で表示を切り替えるということも簡単にできるようになります。
Twigを使いこなしてEC-CUBE4でオリジナルショップを作ろう！
Twigはデータの取り出し方を理解すればそれほど難しいものではありません。データの取り出し方もデフォルトテンプレートのものをコピーしてカスタマイズしていけばHTMLと同じような感じで使えるようになります。
こちらのページではEC-CUBE4.2と4.3向けのデザインテンプレートも販売しています。あらかじめデザイン済みの多数のブロックを配置するだけでレイアウトを作っていくことができます。
とくにコードをいじらなくてもいいのでシンプルなショップを作るならぜひご検討ください。