【EC-CUBE 4系】管理画面をカスタマイズする方法

EC-CUBEの管理画面に機能を追加したいけれど、要件に合うプラグインが見当たらない…ということはありませんか？
実はEC-CUBEではフロント画面だけではなく、管理画面もカスタマイズできるようになっています。
そのため、jQueryライブラリなどと組み合わせればかなり自由に機能を追加をすることができます。

ということで今回はEC-CUBEの管理画面をカスタマイズする方法を紹介しています。
ぜひ最後までご覧ください！

基本編

まずは基本編として、

• 要素を追加する方法

• メニュー項目を追加する方法

を紹介していきます。
「要素を追加する方法」は、管理画面にちょっとした機能を追加したい！という時に、
「メニュー項目を追加する方法」は、管理画面に本格的な機能を追加したい！という時に便利です。

要素を追加する

EC-CUBEの管理画面に新たな要素を追加するには、以下2つの方法があります。

• 1つ目 : コアファイルを編集する方法

  1つ目の方法は、EC-CUBEのコアファイルを編集していくというものです。
  EC-CUBEのコアファイルは以下ディレクトリにあります。

  \src\Eccube\Resource\template\admin

  1 2 3

  \src\Eccube\Resource\template\admin

  こちらの方法だとEC-CUBEのバージョンを上げる際に、記述が無くなってしまう可能性があります。
  ですので、EC-CUBEのバージョンを上げる見込みのあるサイトには推奨されません。

• 2つ目 : カスタマイズファイルを作成する方法

  2つ目の方法は、カスタマイズファイルを作成し、そのファイルを編集していくというものです。
  こちらの方法ではEC-CUBEのバージョンを上げても「記述が無くなる」ということは発生しません。
  また、こちらはEC-CUBEのプラグインでもよく使われている方法となっています。
  ですので、今回は2つ目のカスタマイズファイルを作成する方法を紹介します。

  以下実装の手順です。

手順

1. 1. カスタマイズするTwigファイルを作成する
2. 2. イベントを追加する

1 カスタマイズするTwigファイルを作成する

ファイルを作成する場所は以下です。

\app\template\admin

1 2 3

\app\template\admin

今回は管理画面TOPに要素を追加しようと思うので、

\app\template\admin\admin_test.twig

1 2 3

\app\template\admin\admin_test.twig

上記のように、admin_test.twig を作成しました。

admin_test.twig 内には、追加したい要素と追加する場所の指定をする必要があります。



今回は上記画像の赤枠部分に要素を追加したいので、以下のように記述しました。

\app\template\admin\admin_test.twig

<script> $(function(){ $('#admin_test').prependTo('.c-primaryCol'); }) </script> <style> #admin_test{ padding: 30px; background-color: #fff; } </style> <div id="admin_test" class="mb-4"> これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。 </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<script>   $(function(){     $('#admin_test').prependTo('.c-primaryCol');   }) </script>   <style>   #admin_test{     padding: 30px;     background-color: #fff;   } </style>   <div id="admin_test" class="mb-4">   これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。 </div>

2 イベントを追加する

ファイルを作成する場所は以下です。

\app\Customize\EventListener

1 2 3

\app\Customize\EventListener

EventListener というディレクトリが無ければ、作成してください。

今回は以下ファイルを作成しました。

\app\Customize\EventListener\AdminTestEventListener.php

1 2 3

\app\Customize\EventListener\AdminTestEventListener.php

ファイル名に規定はありませんので、分かりやすい名前にしておくのが良いと思います。

作成したファイルに記載するのは

• 名前空間の指定

• 表示したい管理画面のファイルの指定

• 追加したい要素のファイルの指定

です。

\app\Customize\EventListener\AdminTestEventListener.php

<?php // 名前空間の指定 namespace Customize\EventListener; use Eccube\Event\TemplateEvent; use Symfony\Component\EventDispatcher\EventSubscriberInterface; class AdminTestEventListener implements EventSubscriberInterface { public static function getSubscribedEvents() { // 表示したい管理画面のファイルの指定 return [ '@admin/index.twig' => 'adminIndex' ]; } public function adminIndex(TemplateEvent $event) { // 追加したい要素のファイルの指定 $event->addSnippet('@admin/admin_test.twig'); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<?php // 名前空間の指定 namespace Customize\EventListener;   use Eccube\Event\TemplateEvent; use Symfony\Component\EventDispatcher\EventSubscriberInterface;   class AdminTestEventListener implements EventSubscriberInterface {   public static function getSubscribedEvents()   {     // 表示したい管理画面のファイルの指定     return [       '@admin/index.twig' => 'adminIndex'     ];   }     public function adminIndex(TemplateEvent $event)   {     // 追加したい要素のファイルの指定     $event->addSnippet('@admin/admin_test.twig');   } }

イベント名やメソッド名は、適宜分かりやすい名前を指定してください。

そうすると、管理画面に要素が追加されていると思います！



メニュー項目を追加する

メニューの項目ごと追加する方法を紹介していきます。

以下実装の手順です。

手順

1. 1. サイドバーに項目を追加する
2. 2. 項目名を定義する
3. 3. フロントに表示させるTwigファイルを作成する
4. 4. コントローラーを作成する

1 サイドバーに項目を追加する

管理画面のサイドバー情報が保存されているのは

\app\config\eccube\packages\eccube_nav.yaml

1 2 3

\app\config\eccube\packages\eccube_nav.yaml

です。

今回は商品管理の中に「在庫管理」というメニューを追加してみます。

\app\config\eccube\packages\eccube_nav.yaml

parameters: eccube_nav: product: name: admin.product.product_management icon: fa-cube children: product_master: name: admin.product.product_list url: admin_product product_edit: name: admin.product.product_registration url: admin_product_product_new class_name: name: admin.product.class_management url: admin_product_class_name class_category: name: admin.product.category_management url: admin_product_category product_tag: name: admin.product.tag_management url: admin_product_tag product_csv_import: name: admin.product.product_csv_upload url: admin_product_csv_import category_csv_import: name: admin.product.category_csv_upload url: admin_product_category_csv_import # ★追加 product_stock_menu: name: admin.product.product_stock_menu url: admin_product_stock_menu

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

parameters:     eccube_nav:         product:             name: admin.product.product_management             icon: fa-cube             children:                 product_master:                     name: admin.product.product_list                     url: admin_product                 product_edit:                     name: admin.product.product_registration                     url: admin_product_product_new                 class_name:                     name: admin.product.class_management                     url: admin_product_class_name                 class_category:                     name: admin.product.category_management                     url: admin_product_category                 product_tag:                     name: admin.product.tag_management                     url: admin_product_tag                 product_csv_import:                     name: admin.product.product_csv_upload                     url: admin_product_csv_import                 category_csv_import:                     name: admin.product.category_csv_upload                     url: admin_product_category_csv_import                 # ★追加                 product_stock_menu:                     name: admin.product.product_stock_menu                     url: admin_product_stock_menu

直前の項目などを参考に命名すると良いと思います。

2 項目名を定義する

次に、サイドバーに実際に表示される項目名を定義します。
変更ファイルのコアファイルは以下です。

\src\Eccube\Resource\locale\messages.ja.yaml

1 2 3

\src\Eccube\Resource\locale\messages.ja.yaml

上記ファイルを以下にコピーし、編集しましょう。

\app\Customize\Resource\locale

1 2 3

\app\Customize\Resource\locale

# 機能名称 admin.product.product_management: 商品管理 admin.product.product_list: 商品一覧 admin.product.product_registration: 商品登録 admin.product.product_class_registration: 商品規格登録 admin.product.class_management: 規格管理 admin.product.class_category_management: 規格分類管理 admin.product.category_management: カテゴリ管理 admin.product.tag_management: タグ管理 admin.product.product_csv_upload: 商品CSV登録 admin.product.category_csv_upload: カテゴリCSV登録 # ★追加 admin.product.product_stock_menu: 在庫管理

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

# 機能名称 admin.product.product_management: 商品管理 admin.product.product_list: 商品一覧 admin.product.product_registration: 商品登録 admin.product.product_class_registration: 商品規格登録 admin.product.class_management: 規格管理 admin.product.class_category_management: 規格分類管理 admin.product.category_management: カテゴリ管理 admin.product.tag_management: タグ管理 admin.product.product_csv_upload: 商品CSV登録 admin.product.category_csv_upload: カテゴリCSV登録 # ★追加 admin.product.product_stock_menu: 在庫管理

eccube_nav.yaml で設定した name を指定し、項目名を入力してください。

3 フロントに表示させるTwigファイルを作成する

続いて、Twigファイルを作成します。
今回は商品管理内に項目を追加するので、以下のようにファイルを作成しました。

\app\template\admin\Product\product_stock_menu.twig

1 2 3

\app\template\admin\Product\product_stock_menu.twig

記述は以下になります。

{% extends '@admin/default_frame.twig' %} // 解説① {% set menus = ['product', 'product_stock_menu'] %} // 解説② {% block title %}{{ 'admin.product.product_stock_menu'|trans }}{% endblock %} {% block sub_title %}商品管理{% endblock %} {% block main %} <div class="c-contentsArea__cols"> コンテンツを配置します。コンテンツを配置します。コンテンツを配置します。 </div> {% endblock %}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

{% extends '@admin/default_frame.twig' %}   // 解説① {% set menus = ['product', 'product_stock_menu'] %}   // 解説② {% block title %}{{ 'admin.product.product_stock_menu'|trans }}{% endblock %} {% block sub_title %}商品管理{% endblock %}   {% block main %} <div class="c-contentsArea__cols">   コンテンツを配置します。コンテンツを配置します。コンテンツを配置します。 </div> {% endblock %}

解説①
eccube_nav.yaml の定義名「product_stock_menu」を上記のように指定することで、サイドメニューがカレント表示されます。
解説②
eccube_nav.yaml のname「admin.product.product_stock_menu」を上記のように指定することで、messages.ja.yaml で設定した項目名が出力されます。

4 コントローラーを作成する

最後にコントローラーを作成します。
以下のようにファイルを作成しました。

\app\Customize\Controller\Admin\Product\ProductStockController.php

1 2 3

\app\Customize\Controller\Admin\Product\ProductStockController.php

<?php /* * This file is part of EC-CUBE * * Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved. * * http://www.ec-cube.co.jp/ * * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */ namespace Customize\Controller\Admin\Product; use Eccube\Controller\AbstractController; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\Routing\Annotation\Route; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template; class ProductStockController extends AbstractController { /** * @Route("/%eccube_admin_route%/product/product_stock", name="admin_product_stock_menu") * @Template("@admin/Product/product_stock_menu.twig") */ public function index(Request $request) { return []; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<?php /* * This file is part of EC-CUBE * * Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved. * * http://www.ec-cube.co.jp/ * * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */ namespace Customize\Controller\Admin\Product;   use Eccube\Controller\AbstractController; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\Routing\Annotation\Route; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;   class ProductStockController extends AbstractController {   /**    * @Route("/%eccube_admin_route%/product/product_stock", name="admin_product_stock_menu")    * @Template("@admin/Product/product_stock_menu.twig")    */   public function index(Request $request)   {     return [];   } }

ポイントは以下二点です。

• @Route

  @Routeの第一引数に追加したいメニューのURLを指定し、第二引数にeccube_nav.yamlで指定したURLを記入します。

• @Template

  @Templateには返したいテンプレート名を記載します。
  今回だとこちらで作成した「product_stock_menu.twig」です。

応用編 : 管理画面TOPに売れ筋商品分析グラフを追加する

基本編の内容をもとに、管理画面のカスタマイズ例を紹介します。
今回は、「売れ筋商品」をグラフにして表示してみます。

ページ上にグラフを載せる方法は多々あるかと思いますが、jQueryのライブラリ「Chart.js」を使用すると
簡単にグラフを描画できるのでおすすめです。
以下記事では「Chart.js」について解説していますので、気になった方は是非ご覧ください。

【3系】Chart.jsでレーダーチャートを描画してみよう

作業手順はこちらです。

手順

1. 1. 要素を追加する
2. 2. 静的にグラフを描画する
3. 3. データを取得し、表示させる

要素を追加する

こちらの方法の通り、Twigファイルとイベントを追加していきます。

まずTwigファイルを作成します。

\app\template\admin\admin_sales.twig

1 2 3

\app\template\admin\admin_sales.twig

admin_sales.twig

<script> $(function () { // 要素追加 $('#admin_sales').appendTo('.c-primaryCol'); }); </script> <style> #admin_sales { background-color: #fff; width: 60%; } #admin_sales .inner-block { padding: 30px; } </style> <div id="admin_sales" class="mb-4"> <div class="card-header"> <div class="d-inline-block"> <span class="card-title">売れ筋商品分析</span> </div> </div> <div class="inner-block"> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<script>   $(function () {     // 要素追加     $('#admin_sales').appendTo('.c-primaryCol');   }); </script> <style>   #admin_sales {     background-color: #fff;     width: 60%;   }   #admin_sales .inner-block {     padding: 30px;   } </style> <div id="admin_sales" class="mb-4">   <div class="card-header">     <div class="d-inline-block">       <span class="card-title">売れ筋商品分析</span>     </div>   </div>   <div class="inner-block"> </div> </div>

続いてイベントを追加します。

\app\Customize\EventListener\AdminSalesEventListener.php

1 2 3

\app\Customize\EventListener\AdminSalesEventListener.php

AdminSalesEventListener.php

<?php namespace Customize\EventListener; use Eccube\Event\TemplateEvent; use Symfony\Component\EventDispatcher\EventSubscriberInterface; class AdminSalesEventListener implements EventSubscriberInterface { public static function getSubscribedEvents() { return [ '@admin/index.twig' => 'adminIndex' ]; } public function adminIndex(TemplateEvent $event) { $event->addSnippet('@admin/admin_sales.twig'); } } ?>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<?php namespace Customize\EventListener; use Eccube\Event\TemplateEvent; use Symfony\Component\EventDispatcher\EventSubscriberInterface; class AdminSalesEventListener implements EventSubscriberInterface {   public static function getSubscribedEvents()   {     return [       '@admin/index.twig' => 'adminIndex'     ];   }   public function adminIndex(TemplateEvent $event)   {     $event->addSnippet('@admin/admin_sales.twig');   } } ?>

上記ファイルをサーバーにアップし、管理画面のTOPに追加した要素が表示されるかご確認ください。
確認できたら、次に進みましょう！

静的にグラフを描画する

まずはChart.jsを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>

1 2 3

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>

続いてグラフを描画する記述を追加します。

JavaScript

// データ const bar_labels = ["①", "②", "③", "④", "⑤", "⑥", "⑦"], bar_data = [65, 59, 80, 81, 56, 55, 40]; // 棒グラフ new Chart(document.getElementById("chart-bar"), { "type": "bar", "data": { "labels": bar_labels, "datasets": [{ "label": "売れ筋商品", "data": bar_data, "fill": false, "backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"], "borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"], "borderWidth": 1 }] }, "options": { "scales": { "yAxes": [{ "ticks": { "beginAtZero": true } }] } } });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

// データ const bar_labels = ["①", "②", "③", "④", "⑤", "⑥", "⑦"],   bar_data = [65, 59, 80, 81, 56, 55, 40];   // 棒グラフ new Chart(document.getElementById("chart-bar"), {   "type": "bar",   "data": {     "labels": bar_labels,     "datasets": [{       "label": "売れ筋商品",       "data": bar_data,       "fill": false,       "backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],       "borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],       "borderWidth": 1     }]   },   "options": {     "scales": {       "yAxes": [{         "ticks": {           "beginAtZero": true         }       }]     }   } });

HTML

<div class="chart" style="position:relative;width:100%;"> <canvas id="chart-bar"></canvas> </div>

1 2 3 4 5

<div class="chart" style="position:relative;width:100%;">   <canvas id="chart-bar"></canvas> </div>

このあとデータを取得するため、グラフには仮の値を入れています。
グラフの描画は以下を参考に行いました。
https://www.chartjs.org/docs/2.9.4/charts/

全ソースの表示
admin_sales.twig

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> <script> $(function () { // データ const bar_labels = ["①", "②", "③", "④", "⑤", "⑥", "⑦"], bar_data = [65, 59, 80, 81, 56, 55, 40]; // 棒グラフ new Chart(document.getElementById("chart-bar"), { "type": "bar", "data": { "labels": bar_labels, "datasets": [{ "label": "売れ筋商品", "data": bar_data, "fill": false, "backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"], "borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"], "borderWidth": 1 }] }, "options": { "scales": { "yAxes": [{ "ticks": { "beginAtZero": true } }] } } }); // 要素追加 $('#admin_sales').appendTo('.c-primaryCol'); }); </script> <style> #admin_sales { background-color: #fff; width: 60%; } #admin_sales .inner-block { padding: 30px; display: flex; justify-content: space-between; align-items: center; } #admin_sales #chart{ margin: 0 auto; } </style> <div id="admin_sales" class="mb-4"> <div class="card-header"> <div class="d-inline-block"> <span class="card-title">売れ筋商品分析</span> </div> </div> <div class="inner-block"> <div class="chart" style="position:relative;width:100%;"> <canvas id="chart-bar"></canvas> </div> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> <script>   $(function () {         // データ     const bar_labels = ["①", "②", "③", "④", "⑤", "⑥", "⑦"],       bar_data = [65, 59, 80, 81, 56, 55, 40];          // 棒グラフ     new Chart(document.getElementById("chart-bar"), {       "type": "bar",       "data": {         "labels": bar_labels,         "datasets": [{           "label": "売れ筋商品",           "data": bar_data,           "fill": false,           "backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],           "borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],           "borderWidth": 1         }]       },       "options": {         "scales": {           "yAxes": [{             "ticks": {               "beginAtZero": true             }           }]         }       }     });       // 要素追加     $('#admin_sales').appendTo('.c-primaryCol');   }); </script> <style>   #admin_sales {     background-color: #fff;     width: 60%;   }   #admin_sales .inner-block {     padding: 30px;     display: flex;     justify-content: space-between;     align-items: center;   }   #admin_sales #chart{     margin: 0 auto;   } </style> <div id="admin_sales" class="mb-4">   <div class="card-header">     <div class="d-inline-block">       <span class="card-title">売れ筋商品分析</span>     </div>   </div>   <div class="inner-block">     <div class="chart" style="position:relative;width:100%;">       <canvas id="chart-bar"></canvas>     </div>   </div> </div>

こちらのように、グラフが表示されればOKです！



データを取得し、表示させる

それでは最後にデータを取得し、動的に値を反映させてみましょう。

まずは、出力させるデータをAdminSalesEventListener.phpで取得します。

AdminSalesEventListener.php

// 追加 use Eccube\Repository\OrderItemRepository; use Eccube\Entity\Master\OrderStatus; use Eccube\Entity\Master\ProductStatus; class AdminSalesEventListener implements EventSubscriberInterface { /** * @var OrderItemRepository */ protected $orderItemRepository; public function __construct( OrderItemRepository $orderItemRepository ) { $this->orderItemRepository = $orderItemRepository; } public function getSalesProducts() { $query = $this->orderItemRepository->createQueryBuilder('oi'); $query = $query ->innerJoin('oi.Product', 'p') ->innerJoin('oi.Order', 'o') ->select("COUNT(o.order_date) AS order_count, p.id AS product_id") ->andWhere('oi.Product IS NOT NULL') ->andWhere('o.order_date IS NOT NULL') ->andWhere('o.OrderStatus != ' . OrderStatus::RETURNED) // 「返品」は除く ->groupBy('p.id') ->andWhere('p.Status = :Status') ->setParameter('Status', ProductStatus::DISPLAY_SHOW) // 「公開」されている商品のみ ->orderBy('order_count', 'DESC'); $result = $query->setMaxResults(7)->getQuery()->getResult(); // 最大7件取得 return $result; } ・ ・ ・ public function adminIndex(TemplateEvent $event) { $event->addSnippet('@admin/admin_sales.twig'); $event->setParameter('order_count', AdminSalesEventListener::getSalesProducts()); // Twigに返す } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

// 追加 use Eccube\Repository\OrderItemRepository; use Eccube\Entity\Master\OrderStatus; use Eccube\Entity\Master\ProductStatus;   class AdminSalesEventListener implements EventSubscriberInterface {   /**    * @var OrderItemRepository    */   protected $orderItemRepository;     public function __construct(     OrderItemRepository $orderItemRepository   ) {     $this->orderItemRepository = $orderItemRepository;   }     public function getSalesProducts()   {     $query =  $this->orderItemRepository->createQueryBuilder('oi');     $query = $query       ->innerJoin('oi.Product', 'p')       ->innerJoin('oi.Order', 'o')       ->select("COUNT(o.order_date) AS order_count, p.id AS product_id")       ->andWhere('oi.Product IS NOT NULL')       ->andWhere('o.order_date IS NOT NULL')       ->andWhere('o.OrderStatus != ' . OrderStatus::RETURNED) // 「返品」は除く       ->groupBy('p.id')       ->andWhere('p.Status = :Status')       ->setParameter('Status', ProductStatus::DISPLAY_SHOW) // 「公開」されている商品のみ       ->orderBy('order_count', 'DESC');       $result = $query->setMaxResults(7)->getQuery()->getResult(); // 最大7件取得       return $result;   } ・ ・ ・   public function adminIndex(TemplateEvent $event)   {     $event->addSnippet('@admin/admin_sales.twig');     $event->setParameter('order_count', AdminSalesEventListener::getSalesProducts()); // Twigに返す   } }

売上済みの商品の中から売れている商品を取得したかったので、「OrderItemRepository」からデータを取得しています。
ポイントは29行目と32行目の記述です。
29行目では返品された商品は除外しており、32行目では公開されていない商品を除外しています。
売上を分析する期間なども設定することが出来るので、取得条件は適宜設定してください。
最後に「setParameter」でTwigに返すのも忘れずに。

AdminSalesEventListener.php の全ソースの表示
AdminSalesEventListener.php

<?php namespace Customize\EventListener; use Eccube\Event\TemplateEvent; use Symfony\Component\EventDispatcher\EventSubscriberInterface; // 追加 use Eccube\Repository\OrderItemRepository; use Eccube\Entity\Master\OrderStatus; use Eccube\Entity\Master\ProductStatus; class AdminSalesEventListener implements EventSubscriberInterface { /** * @var OrderItemRepository */ protected $orderItemRepository; public function __construct( OrderItemRepository $orderItemRepository ) { $this->orderItemRepository = $orderItemRepository; } public function getSalesProducts() { $query = $this->orderItemRepository->createQueryBuilder('oi'); $query = $query ->innerJoin('oi.Product', 'p') ->innerJoin('oi.Order', 'o') ->select("COUNT(o.order_date) AS order_count, p.id AS product_id") ->andWhere('oi.Product IS NOT NULL') ->andWhere('o.order_date IS NOT NULL') ->andWhere('o.OrderStatus != ' . OrderStatus::RETURNED) // 「返品」は除く ->groupBy('p.id') ->andWhere('p.Status = :Status') ->setParameter('Status', ProductStatus::DISPLAY_SHOW) // 「公開」されている商品のみ ->orderBy('order_count', 'DESC'); $result = $query->setMaxResults(7)->getQuery()->getResult(); // 最大7件取得 return $result; } public static function getSubscribedEvents() { return [ '@admin/index.twig' => 'adminIndex', ]; } public function adminIndex(TemplateEvent $event) { $event->addSnippet('@admin/admin_sales.twig'); $event->setParameter('order_count', AdminSalesEventListener::getSalesProducts()); // Twigに返す } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

<?php   namespace Customize\EventListener;   use Eccube\Event\TemplateEvent; use Symfony\Component\EventDispatcher\EventSubscriberInterface; // 追加 use Eccube\Repository\OrderItemRepository; use Eccube\Entity\Master\OrderStatus; use Eccube\Entity\Master\ProductStatus;   class AdminSalesEventListener implements EventSubscriberInterface {   /**    * @var OrderItemRepository    */   protected $orderItemRepository;     public function __construct(     OrderItemRepository $orderItemRepository   ) {     $this->orderItemRepository = $orderItemRepository;   }     public function getSalesProducts()   {     $query =  $this->orderItemRepository->createQueryBuilder('oi');     $query = $query       ->innerJoin('oi.Product', 'p')       ->innerJoin('oi.Order', 'o')       ->select("COUNT(o.order_date) AS order_count, p.id AS product_id")       ->andWhere('oi.Product IS NOT NULL')       ->andWhere('o.order_date IS NOT NULL')       ->andWhere('o.OrderStatus != ' . OrderStatus::RETURNED) // 「返品」は除く       ->groupBy('p.id')       ->andWhere('p.Status = :Status')       ->setParameter('Status', ProductStatus::DISPLAY_SHOW) // 「公開」されている商品のみ       ->orderBy('order_count', 'DESC');       $result = $query->setMaxResults(7)->getQuery()->getResult(); // 最大7件取得       return $result;   }       public static function getSubscribedEvents()   {     return [       '@admin/index.twig' => 'adminIndex',     ];   }     public function adminIndex(TemplateEvent $event)   {     $event->addSnippet('@admin/admin_sales.twig');     $event->setParameter('order_count', AdminSalesEventListener::getSalesProducts()); // Twigに返す   } }

続いて、Twigファイルで AdminSalesEventListener.php から受け取ったデータを取得し、グラフに反映させていきましょう。

admin_sales.twig

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> <script> $(function () { {% if order_count %} let bar_labels = [], bar_data = [], $linkArea = $('.bar-link-area'); {% for each in order_count %} // グラフ用データ bar_labels.push('ID : {{ each['product_id'] }}'); bar_data.push({{ each['order_count'] }}); // リンク追加 {% set Product = repository('Eccube\\Entity\\Product').find(each['product_id']) %} var $cloneList = $linkArea.find('li').first().clone().attr('style', ''); $cloneList.find('a') .attr('href', '{{ url('admin_product_product_edit', {'id': Product.id}) }}') .text('{{ Product.name }}'); // 要素追加 $cloneList.appendTo('.bar-link-area'); {% endfor %} ・ ・ ・ {% endif %} }); </script> ・ ・ ・ <div id="admin_sales" class="mb-4"> <div class="card-header"> <div class="d-inline-block"> <span class="card-title">売れ筋商品分析</span> </div> </div> <div class="inner-block"> <div class="chart" style="position:relative;width: 100%;"> <canvas id="chart-bar" ></canvas> <ul class="bar-link-area"> <li style="display: none;"> // ★生成元 <a href=""></a> </li> </ul> </div> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> <script>   $(function () {         {% if order_count %}       let bar_labels = [],         bar_data = [],         $linkArea = $('.bar-link-area');         {% for each in order_count %}         // グラフ用データ         bar_labels.push('ID : {{ each['product_id'] }}');         bar_data.push({{ each['order_count'] }});                  // リンク追加         {% set Product = repository('Eccube\\Entity\\Product').find(each['product_id']) %}         var $cloneList = $linkArea.find('li').first().clone().attr('style', '');         $cloneList.find('a')           .attr('href', '{{ url('admin_product_product_edit', {'id': Product.id}) }}')           .text('{{ Product.name }}');                    // 要素追加         $cloneList.appendTo('.bar-link-area');       {% endfor %}     ・     ・     ・     {% endif %}   }); </script> ・ ・ ・ <div id="admin_sales" class="mb-4">   <div class="card-header">     <div class="d-inline-block">       <span class="card-title">売れ筋商品分析</span>     </div>   </div>   <div class="inner-block">     <div class="chart" style="position:relative;width: 100%;">       <canvas id="chart-bar" ></canvas>       <ul class="bar-link-area">         <li style="display: none;"> // ★生成元           <a href=""></a>         </li>       </ul>     </div>   </div> </div>

AdminSalesEventListener.php の setParameter で「order_count」という変数にデータを渡しているので、初めにデータがあるかif文で判定します。
データがある場合には、データをfor文で回し必要な情報を取得します。
その後、グラフに反映させるために必要に応じて配列に格納してください。

また、今回はグラフの下に商品名やリンクを表示させたいと思いますので、16行目からの処理を追加しました。
商品のIDから商品名と編集画面のリンクを取得し、44行目の要素を元に新たに要素を生成しています。

admin_sales.twig の全ソースの表示
admin_sales.twig

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> <script> $(function () { {% if order_count %} let bar_labels = [], bar_data = [], $linkArea = $('.bar-link-area'); {% for each in order_count %} // グラフ用データ bar_labels.push('ID : {{ each['product_id'] }}'); bar_data.push({{ each['order_count'] }}); // リンク追加 {% set Product = repository('Eccube\\Entity\\Product').find(each['product_id']) %} var $cloneList = $linkArea.find('li').first().clone().attr('style', ''); $cloneList.find('a') .attr('href', '{{ url('admin_product_product_edit', {'id': Product.id}) }}') .text('{{ Product.name }}'); // 要素追加 $cloneList.appendTo('.bar-link-area'); {% endfor %} // 棒グラフ new Chart(document.getElementById("chart-bar"), { "type": "bar", "data": { "labels": bar_labels, "datasets": [{ "label": "売れ筋商品", "data": bar_data, "fill": false, "backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"], "borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"], "borderWidth": 1 }] }, "options": { "scales": { "yAxes": [{ "ticks": { "beginAtZero": true } }] } } }); // 要素追加 $('#admin_sales').appendTo('.c-primaryCol'); {% endif %} }); </script> <style> #admin_sales { background-color: #fff; width: 66%; } #admin_sales .inner-block { padding: 30px; display: flex; justify-content: space-between; align-items: center; } #admin_sales #chart{ margin: 0 auto; } .bar-link-area{ display: flex; justify-content: space-between; padding-left: 20px; margin-top: 5px; } .bar-link-area > li{ flex: 1; text-align: center; font-size: 12px; padding: 0 4px; } </style> <div id="admin_sales" class="mb-4"> <div class="card-header"> <div class="d-inline-block"> <span class="card-title">売れ筋商品分析</span> </div> </div> <div class="inner-block"> <div class="chart" style="position:relative;width: 100%;"> <canvas id="chart-bar" ></canvas> <ul class="bar-link-area"> <li style="display: none;"> <a href=""></a> </li> </ul> </div> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> <script>   $(function () {         {% if order_count %}       let bar_labels = [],         bar_data = [],         $linkArea = $('.bar-link-area');         {% for each in order_count %}         // グラフ用データ         bar_labels.push('ID : {{ each['product_id'] }}');         bar_data.push({{ each['order_count'] }});                  // リンク追加         {% set Product = repository('Eccube\\Entity\\Product').find(each['product_id']) %}         var $cloneList = $linkArea.find('li').first().clone().attr('style', '');         $cloneList.find('a')           .attr('href', '{{ url('admin_product_product_edit', {'id': Product.id}) }}')           .text('{{ Product.name }}');                    // 要素追加         $cloneList.appendTo('.bar-link-area');       {% endfor %}              // 棒グラフ       new Chart(document.getElementById("chart-bar"), {         "type": "bar",         "data": {           "labels": bar_labels,           "datasets": [{             "label": "売れ筋商品",             "data": bar_data,             "fill": false,             "backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],             "borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],             "borderWidth": 1           }]         },         "options": {           "scales": {             "yAxes": [{               "ticks": {                 "beginAtZero": true               }             }]           }         }       });              // 要素追加     $('#admin_sales').appendTo('.c-primaryCol');     {% endif %}   }); </script> <style>   #admin_sales {     background-color: #fff;     width: 66%;   }     #admin_sales .inner-block {     padding: 30px;     display: flex;     justify-content: space-between;     align-items: center;   }      #admin_sales #chart{     margin: 0 auto;   }      .bar-link-area{     display: flex;     justify-content: space-between;     padding-left: 20px;     margin-top: 5px;   }      .bar-link-area > li{     flex: 1;     text-align: center;     font-size: 12px;     padding: 0 4px;   } </style>   <div id="admin_sales" class="mb-4">   <div class="card-header">     <div class="d-inline-block">       <span class="card-title">売れ筋商品分析</span>     </div>   </div>   <div class="inner-block">     <div class="chart" style="position:relative;width: 100%;">       <canvas id="chart-bar" ></canvas>       <ul class="bar-link-area">         <li style="display: none;">           <a href=""></a>         </li>       </ul>     </div>   </div> </div>

このような感じに仕上がりました！



まとめ

いかがでしたでしょうか。
今回はEC-CUBEの管理画面をカスタマイズする方法を紹介しました。

「要素」を追加する場合には2ステップ、
「メニュー項目」を追加する場合には4ステップでそれぞれ対応できます。
また、jQueryライブラリなどと組み合わせればカスタマイズの幅が広がるので、サイトに合ったコンテンツを追加してみて頂ければと思います！

EC-CUBEには様々なプラグインがありますが、管理画面向けのプラグインはあまり無いので、
管理画面のカスタマイズが必要な場合には、この記事を参考にチャレンジしてみてください！
以上、最後までお読みいただきありがとうございました！！

EC-CUBE ECサイト