この記事では、Controllerのもっとも基本的な使い方である、特定のデータを表示ページ（Twigテンプレート）に渡して画面表示させる方法を解説します。
EC-CUBEカスタマイズ初心者向けの内容です。
デバッグモードを設定しておくと、エラーが起きたときに詳細情報が表示されるようになります。
エラー箇所を探しやすくなるので、開発前に設定しておくのをオススメします。
デバッグモードの設定方法については 以下記事 で解説しています。
カスタマイズ後は、デバッグモードの解除を忘れないように。
完成ページ
- 初期ページ
-
テストページ（初期） Twigファイル（以下コード）に直接記載した「テストページ」のみ表示。
{% extends 'default_frame.twig' %} {% block main %} <p>テストページです。</p> {% endblock %}
- 完成ページ
-
テストページ（完成） 「テストページ」に加えて、Controllerから『タイトル』と『リスト』のデータをTwigファイルに渡して表示。
これだけのページであれば、わざわざControllerを使わずともTwigファイルに直接記入すれば作れちゃいます。が、今回は練習の意味も込めて、あえてControllerを使う方法を紹介します。
本記事では、事前に用意したテストページ（URL: ドメイン名/test）とそのControllerを使って解説します。
同じような環境を準備したい方は、以下記事を参考に作ってみてください。
完成ページの作成手順
- Controllerファイルを作成し、ファイルサーバーにアップ
- Twigテンプレートを修正
- EC CUBE 管理画面にてキャッシュを削除
各手順の詳細については以下の通りです。
Controllerファイルを作成し、ファイルサーバーにアップ
以下「TestController」という名前のファイルを作成し、ファイルサーバーの「app/Customize/Controller」にアップします。
新規ページ および Controllerの新規作成については こちらの記事 を参考にしてください。
<?php
namespace Customize\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Eccube\Controller\AbstractController;
class TestController extends AbstractController
{
/**
* @Route("/test", name="test")
* @Template("test.twig")
*/
public function index(Request $request)
{
// 商品リスト（item_1, item_2, item_3）を配列（$products）として定義
$products = [
'item_1',
'item_2',
'item_3',
];
// Twigテンプレートに渡す値をReturnすることで、テンプレート内で利用できます
// 'Title'と'Products'は、それぞれTwigテンプレート内で{{ Title }}と{{ Products }}としてアクセスできるようになります。
return [
'Title' => 'TEST',
'Products' => $products,
];
}
}Twigテンプレートを修正
対象のTwigテンプレート（test.twig）を以下の通り修正します。
{% extends 'default_frame.twig' %}
{% block main %}
<h1>{{ Title }}</h1>
<p>テストページです。</p>
</br>
<ul>
<li>{{ Products[0] }}</li>
<li>{{ Products[1] }}</li>
<li>{{ Products[2] }}</li>
</ul>
{% endblock %}{{ Title }} と{{ Products[0] }} 〜 {{ Products[2] }} には、Controllerで記述した「Test」と「item_1」〜「item_3」がそれぞれ格納されており、ページを表示するとその中身が表示されます。
なお、Productsに格納されているのは配列なので、中身を表示するには [0] などのインデックス表記が必要です。
このような書き方をすることで、ControllerからTwigファイルにデータを渡し、表示することができます。
EC CUBE 管理画面にてキャッシュを削除
ここまでで準備完了です。
管理画面からキャッシュを削除して、ページにアクセスしてみましょう。
冒頭でお見せしたような、タイトルと商品の一覧が表示されればOKです！
まとめ
以上、ControllerからTwigファイルにデータを渡し、表示させるもっとも基礎的な方法を紹介しました。
この程度の内容であれば直接Twigテンプレートに書き込めばよく、あえてControllerを修正する必要はありません。
今回の方法を活かす代表的な使い方は、『データベースの情報をController経由でTwigに渡して表示させること』です。
データベースの情報を取得するにはもう一工夫必要で、「Repository」という機能を使います。
「Repository」を使ってデータベースの情報を取得し、取得した情報をreturnで返すことで、データベースに格納してある情報（商品名や商品画像など）を表示させることができます。
「Repository」の基本的な使い方については こちらの記事 で解説しており、「Repository」を利用することで以下のようなページも作れちゃいます。
本記事の内容はControllerの超基本的な部分ですので、より使いこなせるよう理解を深めてみてください！