ECCUBE4のカスタマイズ入門1 ～独自ページ編～

EC-CUBE

ECCUBE4のカスタマイズ入門1 ～独自ページ編～

2022年09月05日 9:07　

ECCUBE4のカスタマイズ入門1 ～独自ページ編～

こんにちは！社員Kです。

本日は、ECCUBE4（4.1系）の独自カスタマイズを行っていく方法について紹介していきます。

ECCUBE4をカスタマイズする方法

ECCUBE4をカスタマイズする方法

ECCUBE4をカスタマイズするには、まずECCUBE4のディレクトリ構造を知っておく必要があります。
カスタマイズを行う際に主に使うディレクトリは「app」内の下記のディレクトリです。

app
├── Customize   カスタマイズ用PHPコードを配置
├── Plugin      インストールしたプラグインを配置
├── PluginData  プラグインが利用するファイルを配置
├── config      設定ファイルを配置
├── proxy       Entity拡張機能によって生成されたProxyクラスを配置
└── template    上書きされたテンプレートファイルを配置

商品登録に独自の項目(メーカー、ブランド名)を追加したり、独自のページを追加する場合は「Customize」ディレクトリにPHPファイルを設置していくことになります。

主に「Customize」ディレクトリを使ったカスタマイズについて紹介していきたいと思います。

独自ページを追加する方法

ECCUBE4で独自にページを追加する方法は2つ。
今回は②の方法をご紹介します。

管理画面のコンテンツ管理からページを作成する方法
CustomizeディレクトリにControllerを作成する方法

Controllerファイルを作成

下記の位置に新規ファイルを作成します。
app/Customize/Controller/SamplePageController.php

下記は、最もシンプルなコントローラーの例です。
※EC-CUBE 4 開発者向けドキュメントサイトから引用しています。

「@Route(“/sample”)」でページURLを指定できます。

<?php

namespace Customize\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Component\HttpFoundation\Response;

class SamplePageController
{
    /**
     * @Method("GET")
     * @Route("/sample")
     */
    public function testMethod()
    {
        return new Response('Hello sample page !');
    }
}

ひとまず上記のファイルを作成するだけで、
http://サイトURL/sample にアクセスすると”Hello sample page !”と表示する独自ページの完成です。

これだけだと、あまり使い道がないので、twigテンプレートを使用して画面を表示するコントローラーにします。
@Template(“Sample/index.twig”) を追加してテンプレートファイルを指定できます。

この場合のtwigファイルは、 app/template/default/Sample/index.twig に作成します。

<?php

namespace Customize\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Symfony\Component\HttpFoundation\Response;

class SamplePageController
{
    /**
     * @Method("GET")
     * @Route("/sample")
     * @Template("Sample/index.twig")
     */
    public function testMethod()
    {
        return ['name' => 'EC-CUBE'];
    }
}