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

         

EC-CUBE

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

2022年09月05日 9:07 

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

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

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



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

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

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

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

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

 

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

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

  1. 管理画面のコンテンツ管理からページを作成する方法
  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'];
    }
}


 

共通レイアウトを反映したり、各種データを読み込んで表示する

ここまでの手順で独自ページを作成することは出来ましたが、
このままだと、真っ白の画面にただ文字が表示されるだけのページになります。

次回の記事で、共通レイアウトの表示や各種データを読み込んで表示する方法について紹介していきたいと思います!

関連記事

この記事を書いた人

社員K

福岡でWebプログラマー・フロントエンドエンジニアとして10年目。まだまだ勉強することが沢山あるなぁと最近良く思います。日本語には自信があります。すぐに効くダイエット情報募集中!