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

この記事では、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を使って解説します。
同じような環境を準備したい方は、以下記事を参考に作ってみてください。

作成手順と各手順の詳細

  1. Controllerファイルを作成し、ファイルサーバーにアップ。
  2. Twigファイルを修正。
  3. 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」を利用することで以下のようなページも作れちゃいます。

本記事の内容はControllerの超基本的な部分ですので、より使いこなせるよう理解を深めてみてください!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次