【EC-CUBE 4】Controllerから表示ページにデータを渡す方法（初心者向け）

2022年6月15日2022年9月21日

この記事では、Controllerから特定のデータを表示ページ（Twig）に渡し、実際に表示させる方法を解説します。

本格的なカスタマイズをしてみたい、初心者向けの内容です。

【動作環境】
EC CUBEのバージョン：4.1.2
サーバー：Xserver
ブラウザ：Google Chrome

なおデバッグモードを設定しておくと、エラーが起きたときに詳細情報が表示されるようになります。
エラー箇所を探しやすくなるので、開発前に設定しておくのをオススメします。
デバッグモードの設定方法についてはこちらの記事で解説しています。

完成ページ

初期ページ

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にアップします。

<?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)
  {
    $products = [
      'item_1',
      'item_2',
      'item_3',
    ];
 
    return [
          'Title' => 'TEST',
          'Products' => $products,
        ];
    }    
}

これまでに作成したControllerとの違いは以下の2点。

19〜23行目

「item_1」「item_2」「item_3」という商品3点を、$productsという変数に配列形式で格納。

25〜28行目

表示ページにデータを渡すための記述。

『’Title’ → ‘TEST’』は、Twigファイル内の {{ Title }} 部分に TEST という文字列を代入
『’Products’ → $products』は、Twigファイル内の {{ Products }} 部分に $products（＝「item_1」「item_2」「item_3」が格納された配列）を代入

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

4行目の{{ Title }} と 8〜10行目の{{ Products[0] }} 〜 {{ Products[2] }} には、先程Controllerで書いた「Test」と「item_1」〜「item_3」がそれぞれ格納されており、ページを表示するとその中身が表示されます。
なお、Productsに格納されているのは配列なので、中身を表示するには [0] などのインデックス表記が必要です。

このような書き方をすることで、ControllerからTwigファイルにデータを渡し、表示させることができます。

キャッシュを削除

ここまでで準備完了です。
管理画面からキャッシュを削除して、ページにアクセスしてみましょう。

冒頭でお見せしたような、タイトルと商品の一覧が表示されればOKです！

まとめ

以上、ControllerからTwigファイルにデータを渡し、表示させる方法を紹介しました。
が、この程度の内容であれば直接Twigファイルに書き込めばよく、あえてControllerをいじる必要はありません。

今回の方法を活かす代表的な使い方は、『データベースの情報をController経由でTwigに渡して表示させること』です。
データベースの情報を取得するにはもう一工夫必要で、「Repository」という機能を使います。この「Repository」を使うことでデータベースの情報を取得でき、取得した情報をreturnで返すことで、データベースに格納してある情報（商品名や商品画像など）を表示させることができるのです。

「Repository」の基本的な使い方についてはこちらの記事で解説しており、「Repository」を利用することで以下のようなページも作れちゃいます。