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
では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はバックエンドとフロントエンドを切り離せるので、デザイナーにとっても使いやすいテンプレートエンジン。
新着商品一覧や売れ筋商品はバックエンドのプログラミングが必要ですが、UICubeを使えば、プログラミング部分ができているのでTwigのみで表示のカスタマイズが可能です。