EC-CUBE独自プラグインのコンポーネント作成

# 動作環境
php 7.4.27sy
EC-CUBE4.1.2-p1
Symfony 3.4.49
MariaDB　10.5.13

# プラグイン基本設定
code:CompanyNameOriginalPlugin
name:companynameoriginalplugin
独自名:OriginalPlugin

# 開発準備
### 開発モードに切り替える

```:vim&nbsp;/var/www/html/example.com/.env
APP_ENV=prod
APP_DEBUG=0

↓

APP_ENV=dev
APP_DEBUG=1

```

### EC-CUBE内に独自プラグインサンプルを作成

プラグインジェネレータ生成

```
cd /var/www/html/example.com

php bin/console eccube:plugin:generate
```

プラグイン名を尋ねられるので入力
プラグイン名は英子文字（キャメル、スネーク不可）
例：companynameoriginalplugin

```
EC-CUBE Plugin Generator Interactive Wizard
===========================================

 name [EC-CUBE Sample Plugin]:
 >
```

コード名を尋ねられるので入力
コード名は[ベンダー名][プラグイン]の形式を推奨 キャメルケースで記述
例：CompanyNameOriginalPlugin

```
code [Sample]:
 >
```

バージョンを入力
1.0.10 を入力

```
 ver [1.0.0]:
 >
```

以下のように表示されれば成功

```            
 [OK] Plugin was successfully created: companynameoriginalplugin CompanyNameOriginalPlugin 1.0.0                   
```

確認する

```
ls /var/www/html/example.com/app/Plugin/

CompanyNameOriginalPlugin
```

インストールする

```
php bin/console eccube:plugin:install --code=CompanyNameOriginalPlugin

 [OK] Installed. 
```

有効化する

```
php bin/console eccube:plugin:enable --code=CompanyNameOriginalPlugin


[OK] Plugin Enabled. 
```


参考：EC-CUBE4独自プラグインサンプル作り方
https://qiita.com/woonotch/items/c474f2ea9b5a91134221

### プラグインファイル構造

```
プラグインのルートディレクトリ
｜ーController/
│   └── Admin
│              └── ConfigController.php （プラグイン設定画面からデータを登録）
｜ーEntity/
│   └── Config.php （データベースにマッピングしデータを登録）
｜ーForm/
│   ├── Extension
│   │       └── TypeExtension.php （既存のフォームをカスタマイズ）
│   └── Type
│              └── Admin
│                         └── ConfigType.php （プラグイン設定のFormを作成）
｜ーRepository/
│   └── ConfigRepository.php （Entityの読み込みを補助する）
｜ーResource/
│   ├── assets
│   │       ├── css
│   │       │       └── xxxx.css
│   │       ├── img
│   │       │       ├── xxxx.gif
│   │       │       ├── xxxx.jpg
│   │       │       └── xxxx.png
│   │       └── js
│   │                 └── xxxx.js
│   ├── locale （多言語対応）
│   │       └── messages.ja.yaml （日本語のメッセージファイル）
│   │       └── validators.ja.yaml （日本語のバリデーションメッセージファイル）
│   └── template （フロント画面へのパーツ埋め込み）
│              └── Admin
│                         └── config.twig（プラグイン設定画面）
│              └── default
│                         └── Block
│                         └── Cart
│                         └── Contact
│                         └── Form
│                         └── Product
│                         └── そのほか必要な機能
｜ーService
│       └── XXXXService.php
｜
｜ーcomposer.json（プラグインの情報が記述されている）
｜ーLICENSE.txt
｜ーEvent.php（イベント名と呼び出すメソッド名を定義）
｜ーNav.php（管理画面のサイドメニューに項目を追加する）
｜ーTwigBlock.php（UI要素の追加）
｜ーPluginManager.php （プラグインのインストール・アンインストール・有効・無効・アップデートのクラス記述）
```
最低composer.jsonがあれば動く

# カスタム１）管理画面に独自設定ページを作成する

`Nav.php`
`config.twig`
`ConfigController.php`
３ページをカスタム

### 管理画面メニューの階層構造

```:/var/www/html/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: #[商品CSV登録]
                    name: admin.product.product_csv_upload
                    url: admin_product_csv_import
                category_csv_import: #[カテゴリCSV登録]
                    name: admin.product.category_csv_upload
                    url: admin_product_category_csv_import
        order:
            name: admin.order.order_management
            icon: fa-shopping-cart
            children:
                order_master: #[受注管理/受注一覧]
                    name: admin.order.order_list
                    url: admin_order
                order_edit: #[受注登録]
                    name: admin.order.order_registration
                    url: admin_order_new
                shipping_csv_import: #[出荷CSV登録]
                    name: admin.order.shipping_csv_upload
                    url: admin_shipping_csv_import
        customer:
            name: admin.customer.customer_management
            icon: fa-users
            children:
                customer_master: #[会員一覧]
                    name: admin.customer.customer_list
                    url: admin_customer
                customer_edit: #[会員登録]
                    name: admin.customer.customer_registration
                    url: admin_customer_new
        content:
            name: admin.content.contents_management
            icon: fa-file-text-o
            children:
                news:
                    name: admin.content.news_management #[コンテンツ管理/新着情報管理]
                    url : admin_content_news
                file:
                    name: admin.content.file_management #[ファイル管理]
                    url: admin_content_file
                layout:
                    name: admin.content.layout_management #[レイアウト管理]
                    url: admin_content_layout
                page:
                    name: admin.content.page_management #[ページ管理]
                    url: admin_content_page
                css: #[CSS管理]
                    name: admin.content.css_management
                    url: admin_content_css
                js: #[JavaScript管理]
                    name: admin.content.js_management
                    url: admin_content_js
                block: #[ブロック管理]
                    name: admin.content.block_management
                    url: admin_content_block
                cache: #[キャッシュ管理]
                    name: admin.content.cache_management
                    url: admin_content_cache
                maintenance: #[メンテナンス管理]
                    name: admin.content.maintenance_management
                    url: admin_content_maintenance
        setting:
            name: admin.setting
            icon: fa-cog
            children:
                shop:
                    name: admin.setting.shop
                    children:
                        shop_index: #[設定/店舗設定/基本設定]
                            name: admin.setting.shop.shop_setting
                            url: admin_setting_shop
                        shop_tradelaw: #[特定商取引法設定]
                            name: admin.setting.shop.tradelaw_setting
                            url: admin_content_page_edit
                            param: { id: !php/const Eccube\Entity\Page::TRADELAW_PAGE_ID, return: tradelaw }
                        shop_agreement: #[利用規約設定]
                            name: admin.setting.shop.agreement_setting
                            url: admin_content_page_edit
                            param: { id: !php/const Eccube\Entity\Page::AGREEMENT_PAGE_ID, return: agreement }
                        shop_payment: #[支払方法設定]
                            name: admin.setting.shop.payment_setting
                            url: admin_setting_shop_payment
                        shop_delivery: #[配送方法設定]
                            name: admin.setting.shop.delivery_setting
                            url: admin_setting_shop_delivery
                        shop_tax: #[税率設定]
                            name: admin.setting.shop.tax_setting
                            url: admin_setting_shop_tax
                        shop_mail: #[メール設定]
                            name: admin.setting.shop.mail_setting
                            url: admin_setting_shop_mail
                        shop_csv: #[CSV出力設定]
                            name: admin.setting.shop.csv_setting
                            url: admin_setting_shop_csv
                        shop_order_status: #[受注対応状況設定]
                            name: admin.setting.shop.order_status_setting
                            url: admin_setting_shop_order_status
                        shop_calendar: #[定休日カレンダー設定]
                            name: admin.setting.shop.calendar_setting
                            url: admin_setting_shop_calendar
                system:
                    name: admin.setting.system
                    children:
                        member: #[システム設定/メンバー設定]
                            name: admin.setting.system.member_management
                            url: admin_setting_system_member
                        authority: #[権限設定]
                            name: admin.setting.system.authority_management
                            url: admin_setting_system_authority
                        security: #[セキュリティ設定]
                            name: admin.setting.system.security_management
                            url: admin_setting_system_security
                        login_history: #[ログイン履歴]
                            name: admin.setting.system.login_history
                            url: admin_setting_system_login_history
                        log: #[ログ表示]
                            name: admin.setting.system.log_display
                            url: admin_setting_system_log
                        masterdata: #[マスターデータ管理]
                            name: admin.setting.system.master_data_management
                            url: admin_setting_system_masterdata
                        system_index: #[システム情報]
                            name: admin.setting.system.system_info
                            url: admin_setting_system_system
        store:
            name: admin.store
            icon: fa-plug
            children:
                plugin:
                    name: admin.store.plugin
                    children:
                        plugin_owners_search: #[オーナーズストア/プラグイン/プラグインを探す]
                            name: admin.store.plugin.plugin_owners_install
                            url: admin_store_plugin_owners_search
                        plugin_list: #[プラグイン一覧]
                            name: admin.store.plugin.plugin_list
                            url: admin_store_plugin
                template:
                    name: admin.store.template
                    children:
                        template_list: #[テンプレート/テンプレート一覧]
                            name: admin.store.template.template_list
                            url: admin_store_template
                        template_install: #[アップロード]
                            name: admin.store.template.template_install
                            url: admin_store_template_install
                authentication_setting: #[認証キー設定]
                    name: admin.store.setting
                    url: admin_store_authentication_setting
```
このうちどの位置に独自プラグイン設定ページを入れるか決める

### Nav.phpカスタム

Nav.phpをコピペして保存

```
# cp /var/www/html/example.com/app/Plugin/CompanyNameOriginalPlugin/Nav.php /var/www/html/example.com/app/Plugin/CompanyNameOriginalPlugin/Nav.php.cp
```

```:/var/www/html/example.com/app/Plugin/CompanyNameOriginalPlugin/Nav.php
<?php

namespace Plugin\CompanyNameOriginalPlugin;

use Eccube\Common\EccubeNav;

class Nav implements EccubeNav
{
    /**
     * @return array
     */
    public static function getNav()
    {
        return [];
    }
}
```

public static function getNav()内に階層を指定



例：管理画面＞受注一覧[カテゴリ名 例：order]内に[設定ページ.twig名　例：example_page]を追加したい場合

```:一階層書き方
class Nav implements EccubeNav
{
     /**
     * @return array
     */
    public static function getNav()
    {
        return [
            '[カテゴリ名 例：order]' => [
                'children' => [
                    '[カテゴリ名 例：order]_[設定ページ.twig名　例：example_page]' => [
                        'name' => 'プラグイン設定', #管理画面メニューに表示
                        'url' => 'admin_[カテゴリ名 例：order]_[設定ページ.twig名　例：example_page]' #この名前をController.phpに設定
                    ],
                ],
            ],
        ];
    }
}

```

```:二階層書き方
class Nav implements EccubeNav
{
     /**
     * @return array
     */
    public static function getNav()
    {
        return [
            '[カテゴリ名 例：order]' => [
                'children' => [
                    '[カテゴリ名 例：order]_[設定ページ.twig名　例：example_page]' => [
                        'name' => 'プラグイン設定', #管理画面メニューに表示
                             'children' => [
                                     '[カテゴリ名 例：order]_[設定ページ.twig名　例：example_page]' => [
                                     'name' => 'プラグイン設定', #管理画面メニューに表示
                                      'url' => 'admin_[カテゴリ名 例：order]_[設定ページ.twig名　例：example_page]' ,#この名前をController.phpに設定
                              ],
                         ],
                    ],
                ],
            ],
        ];
    }
}
```

### config.twigカスタム

ページファイル`example_page.twig`を作成する

```:/var/www/html/example.com/app/Plugin/CompanyNameOriginalPlugin/Resource/template/admin/[設定ページ.twig名　例：example_page].twig
{% extends '@admin/default_frame.twig' %}

{% set menus = ['[カテゴリ名 例：order]', 'admin_[設定ページ.twig名　例：example_page]'] %}    #['Nav.phpに指定した上部階層', 'Nav.phpに指定したurl']

{% block title %}タイトル{% endblock %}
{% block sub_title %}サブタイトル{% endblock %}


{% block main %}
テストです。
{% endblock %}
```

### Controller.phpカスタム

ConfigController.phpをコピペして保存

```
# cp /var/www/html/example.com/app/Plugin/CompanyNameOriginalPlugin/Admin/ConfigController.php /var/www/html/example.com/app/Plugin/CompanyNameOriginalPlugin/Admin/[プラグイン独自名]Controller.php
```

```:/var/www/html/example.com/app/Plugin/CompanyNameOriginalPlugin/Admin/[プラグイン独自名]Controller.php
<?php

namespace Plugin\CompanyNameOriginalPlugin\Controller\Admin;

use Eccube\Controller\AbstractController;
use Plugin\CompanyNameOriginalPlugin\Form\Type\Admin\ConfigType;
use Plugin\CompanyNameOriginalPlugin\Repository\ConfigRepository;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Response;
use Knp\Component\Pager\Paginator;

class CompanyNameOriginalPluginController extends AbstractController
{
    /**
     * @Route("/%eccube_admin_route%/[設定ページ.twig名　例：example_page]", name="[Nav.phpに指定したurl]")
     * @Template("@[プラグイン独自名]/admin/[設定ページ.twig名　例：example_page].twig")
     */
    public function index(Request $request)
    {
        # 当面ここは削除
    }
}
```
### 管理画面のメニューに追加されていること確認

# カスタム２）プラグイン独自CSSを作成する

### インストール時の特殊な振る舞い
プラグインパッケージに含まれている
/[プラグインコード名]/Resource/assets/css/`[ファイル名].css`
が、インストール時に
root/html/[プラグインコード名]/assets/css/`[ファイル名].css`
へ自動コピーされる

### 開発時
CSSファイル作成

```:/var/www/html/example.com/html/CompanyNameOriginalPlugin/assets/css/plugin.css
#[id名]{
css名:指定;
}

.[class名]{
css名:指定;
}
```
Twigファイル作成

```:/var/www/html/example.com/app/Plugin/CompanyNameOriginalPlugin/Resource/template/admin/example_page.twig
{% block stylesheet %}
    <link rel="stylesheet" href="{{ asset('CompanyNameOriginalPlugin/assets/css/plugin.css', 'plugin') }}">
{% endblock %}

{% block main %}
```

### 開発後

root/html/[プラグインコード名]/assets/css/`[ファイル名].css`
を
root/app/Plugin/[プラグインコード名]/Resource/assets/css/`[ファイル名].css`
へコピー

その後、パッケージ化

# 参考記事
`css`
https://ruco.la/memo/246