EC-CUBE3系で管理画面にナビゲーションを追加する

Last-modified: Sat, 31 Mar 2018 18:33:18 JST (172d)

EC-CUBE3系になって、俺の考えた最強のフレームワークから、一般的なフレームワークに大きく構造が変わったEC-CUBEですが、
そのため、カスタマイズするのが大変になった感があります。
ここでは、カスタマイズのサンプルとして、管理画面にナビゲーションを追加してみます。

ここにソースがあります。
開発が楽なように、Dockerで動くようにしています。
コンテナは俺の考えた最強の(ry でもいいのですが、一応公式(?)っぽいのがあったのでそれを使っています。

EC-CUBE3の管理画面のナビゲーションはこんな感じです。今回はここにメニューを追加します。

eccube01.jpg
  • EC-CUBE3のナビゲーションメニューは、src/Eccube/Resource/config/nav.yml.distに設定がありますので、
    まずはここにメニューを追加します。
    イメージとしては、
    ----設定
          |----追加した設定項目
                  |----設定画面その1
    のようにしたいので、設定項目の下に以下のような設定を追記します。
         - id: powerfull
           name: 俺の考えた最強の設定
           has_child: true
           child:
             - id: powerfull_settings
               name: 最強の設定画面
               url: admin_setting_powerfull_powerful_powerfull_settings
    • ここで注意なのが、どうもEC-CUBE3の仕組み上、3階層までしかメニューを持てないようです。
      まず、親となる追加する設定項目に、has_child: trueとし、子供を持たせます。
      子供の要素には、名前と、urlに識別名を入れます。ここは何でもいいのですが、ほかのに合わせておくと良いです。
      後でこの識別名とルーティング(URLパス)を対応付けさせることによって、実際のリンクとして機能させます。
  • 次に先ほど述べたルーティングに追加していきます。管理ページのルーティングはsrc/Eccube/ControllerProvider/AdminControllerProvider.phpにありますので、以下のように追加します。
           // powerfull/powerfull_settings
           $c->match('/setting/powerfull/powerfull_settings','\Eccube\Controller\Admin\Setting\Powerfull\PowerfullController::index')->bind('admin_setting_powerfull_powerful_powerfull_settings');
    何となく意味は分かると思いますが、match()の第一引数でセットしたURLにアクセスすると、第二引数のコントローラクラスのindexメソッドを呼び出すぜ。という組み合わせ(?)をbindで先ほどの識別子と対応させています。
  • さて、適当にコントローラクラスを指定してしまったので、作成します。
    今回は簡単に画面表示だけするものを作ります。
    src/Eccube/Controller/Admin/Setting/Powerfull/PowerfullController.phpをサクッとこんな感じで。
    namespace Eccube\Controller\Admin\Setting\Powerfull;
    
    use Eccube\Application;
    use Eccube\Controller\AbstractController;
    use Eccube\Event\EccubeEvents;
    use Eccube\Event\EventArgs;
    use Symfony\Component\HttpFoundation\Request;
    
    class PowerfullController extends AbstractController
    {
        public function index(Application $app, Request $request)
        {
            return $app->render('Setting/Powerfull/powerfull_settings.twig');
        }
    }
    indexメソッドはテンプレートファイルを指定してビューを呼び出すだけです。
  • では最後に、テンプレートファイルを作成しましょう。
    src/Eccube/Resource/template/admin/Setting/Powerfull/powerfull_settings.twig
    {% extends 'default_frame.twig' %}
    
    {% set menus = ['setting', 'powerfull', 'powerfull_settings_index'] %}
    
    {% block title %}俺の考えた最強の設定{% endblock %}
    {% block sub_title %}俺の考えた最強の設定画面{% endblock %}
    
    
    {% block main %}
    
        <div class="row" id="aside_wrap">
            俺の考えた最強の設定画面跡地
        </div>
    
    {% endblock %}
    すると、こんな感じでナビゲーションに追加されます。
    eccube02.jpg

Counter: 155, today: 1, yesterday: 2

このページの参照回数は、155です。