LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@woonotch(woonotch)

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

Last updated at Posted at 2022-12-06

動作環境

php 7.4.27sy
EC-CUBE4.1.2-p1
Symfony 3.4.49
MariaDB　10.5.13

プラグイン基本設定

code:CompanyNameOriginalPlugin
name:companynameoriginalplugin
独自名:OriginalPlugin

開発準備

開発モードに切り替える

vim /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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?