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

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

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

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

本記事の実装後の状態

URLから「user_data」を削除

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

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

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

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

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

目次

新規ページ作成の手順

  1. 「EC-CUBE 管理画面」→「コンテンツ管理」→「ページ管理」より、新規ページを作成。
  2. ファイルサーバーにアクセスし、新規ページのTwigテンプレートを「app/template/default」ディレクトリにコピー。
    管理画面から作成したページのTwigテンプレートは「app/template/user_data」ディレクトリにあります。
  3. 新規ページのControllerファイルを作成し、「app/Customize/Controller」ディレクトリにアップ。
  4. データベースにアクセスし、新規ページの「edit_type」を”0″ → “2”に変更。
  5. 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」が作成されています。
Xserverのファイルマネージャー操作画面
「app/template/default」に「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 SampleController extends AbstractController
{
    /**
     * @Route("/sample", name="sample")
     * @Template("sample.twig")
     */
    public function index(Request $request)
    {
            return [];
    }
}
  • ファイル名とクラス名は同じ名前にしておくこと。(違う名前にするとエラーになります。)
    上の例では「SampleController」としました。
  • @Route(“/sample”, name=”sample”)とすることで、「ドメイン名/sample」というURLでアクセスできるようになります。
  • @Template(“sample.twig”)では、先程コピーしたTwigテンプレートを指定します。

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

Xserverのファイルマネージャー操作画面
「app/Customize/Controller」に「SamplePageController.php」をアップ。
STEP

【データベース】新規ページの「edit_type」を変更

データベースにアクセスし「dtb_page」テーブルを開きます。
新規作成したページ情報のレコードを探し、「edit_type」を0から2に変更します。

dtb_pageテーブルで、新規ページのレコードを探してedit_typeを変更する画面
初期値の「edit_type」は0になっています。
dtb_pageテーブルで、新規ページのレコードを探してedit_typeを変更する画面
「edit_type」を2に変更して保存します。
STEP

【EC-CUBE 管理画面】キャッシュを削除

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

EC-CUBE管理画面のキャッシュ管理画面の画像
キャッシュ管理からキャッシュを削除できます。
「user_data」の含まれない、任意のURLをもつ新規ページが作成できました。

まとめ

以上、管理画面にて新規ページを作成し、さらにデフォルトのページと同等に扱う方法について紹介しました。

本記事で作成したControllerは、必要最低限の機能(指定したURLにアクセスすると、任意のTwigテンプレートを表示するだけ)しかありませんが、「データベースから特定の商品情報や会員情報を抽出して表示する」といった機能をもたせるなど、カスタマイズ次第で色々なページを作成できるようになります。

本サイトでは、以下のようなページの作り方も公開しているので、ぜひ合わせてご覧ください!


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