【EC-CUBE 4】新規ページ（「user_data」なし）の作成方法

2023年7月19日

管理画面から新規ページを作成し、さらにそのページのControllerファイルを作成して、デフォルトのページと同等に扱えるようにする方法を紹介します。
（この過程で、URLから「user_data」を削除し、任意のURLを設定できます。）

管理画面から新規ページを追加しただけの状態

管理画面から追加しただけの新規ページ — URLには「user_data」が含まれる

本記事の実装後の状態

Controllerファイルを合わせて作成するので、管理画面から作成しただけのページよりも柔軟性が高いページを作成できます。
「データベースから特定の商品情報を抽出して表示したい」というような場合には特にオススメです。

開発前にデバッグモードの設定をお薦めします

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

【EC-CUBE 4】デバッグモードの設定/解除方法

カスタマイズ後は、デバッグモードの解除を忘れないように。

【動作環境】
EC CUBEのバージョン：4.2.1
サーバー：Xserver

新規ページ作成の手順

EC-CUBE 管理画面にて、新規ページを作成。
ファイル管理にて、新規ページのTwigテンプレートを「app/template/default」にコピー。
管理画面から作成したページのTwigテンプレートは「app/template/user_data」にあります。
新規ページのControllerファイルを「app/Customize/Controller」に作成。
データベースにて、新規ページの「edit_type」を”0″ → “2”に変更。
EC-CUBE 管理画面にて、キャッシュを削除。

本カスタマイズはEC-CUBEの管理画面に加えて、ファイルサーバーとデータベースにアクセスする必要があります。
（著者はXserverを使用しているので、以降の説明にはXserverの操作画面が出てきます。）

またControllerファイルを作成する必要があるので、VS Codeなどのエディターがあると便利です。

ファイルサーバーやデータベースを操作するときは、誤って他のファイルやデータを消したり変更したりしないよう注意してください！

STEP

【EC-CUBE 管理画面】新規ページを作成

「コンテンツ管理」→「ページ管理」より新規ページを作成します。

EC-CUBE管理画面で新規ページを追加する画面 — URLとファイル名は「sample」としておきます。

「ドメイン/user_data/sample」にアクセスすると、先程作成したページが表示される状態です。

STEP

【ファイルサーバー】Twigテンプレートを「app/template/default」にコピー

ファイルサーバーにアクセスし、先程作成したページのTwigテンプレート（app/template/user_dataに格納されています）を「app/template/default」に複製します。

Xserverのファイルマネージャー操作画面 — 「app/template/user_data」に「sample.twig」が作成されています。

STEP

【ファイルサーバー】Controllerファイルを作成し「app/Customize/Controller」にアップ

指定したURLにアクセスしたときに、STEP 2で複製したTwigテンプレートが表示されるためのController（phpファイル）を作成します。

<?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 SamplePageController extends AbstractController
{
    /**
     * @Route("/sample", name="sample")
     * @Template("sample.twig")
     */
    public function index(Request $request)
    {
            return [];
    }
}

ファイル名とクラス名は同じ名前にしておくこと。（違う名前にするとエラーになるかも？）
上の例では「SamplePageController」としました。
@Route(“/sample”, name=”sample”)とすることで、「ドメイン名/sample」というURLでアクセスできるようになります。
@Template(“sample.twig”)では、先程コピーしたTwigテンプレートを指定します。sample部分はTwigテンプレート名と同じにします。

このControllerファイルを「app/Customize/Controller」フォルダにアップします。