• 2018.10.30
  • [最終更新日]2018.10.23
  • EC-cube

【EC-cube3】プラグイン開発に向けて初心者がいろいろやってみる(3):フォームの追加

【EC-cube3】プラグイン開発に向けて初心者がいろいろやってみる(3):フォームの追加のイメージ画像

今回は、「フォームの追加」を実装してみます。
データベースのことは一旦考えずに作成します。

既存フォーム拡張の場合
フックポイントを利用して、イベントを起こします。
新たにevent.ymlや〇〇Event.phpといったファイルが必要となります。
新規フォーム追加の場合
FormTypeを追加する以外は、新規ページ作成時と同じようなファイルを編集します。

既存フォーム(FormType)の拡張

EC-cubeで定義されているFormTypeを拡張するために、フックポイントを利用します。
予め用意されているフックポイントの一部をこちらで紹介しています。

管理画面内「設定」→「基本情報設定」→「ショップマスター」に項目を追加する場合を例として実装していきます。

event.ymlにフックポイントを定義

どこで何をするか(どのフックポイントでどんなメソッドを実行するか)書いておくイメージでしょうか。

admin.setting.shop.shop.index.initialize:
    - [onAdminSettingShopShopIndexInitialize, NORMAL]

TestPluginEvent.phpにメソッドを定義

さっき書いておいた「何(onAdminSettingShopShopIndexInitialize)」の詳細を書くイメージだと思います。

<?php

namespace Plugin\TestPlugin;

use Eccube\Event\EventArgs;

class TestPluginEvent
{
    private $app;

    public function __construct($app)
    {
        $this->app = $app;
    }

    public function onAdminSettingShopShopIndexInitialize(EventArgs $event)
    {
        $builder = $event->getArgument('builder');
        $builder->add(
            'plg_test',
            'text',
            array(
                'label' => 'テスト項目',
                'mapped' => false,
            )
        );
    }
}

config.ymlにクラスを定義

コンフィグファイルには、イベントをするならクラス名を伝えておかないといけません。

name: テストプラグイン
code: TestPlugin
version: 1.0.0
event: TestPluginEvent

これで、「ショップマスター」にテスト項目というフォームが追加されていると思います。

新規フォーム(FormType)の追加

前回の記事で作った新規ページにフォームを追記してみます。

FormTypeの作成

「app/Plugin/TestPlugin/Form/Type」配下に、「TestFormType.php」を作成します。

<?php

namespace Plugin\TestPlugin\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Validator\Constraints as Assert;

class TestFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add(
            'plg_test',
            'text',
            array(
                'label' => 'テスト項目',
                'required' => false,
            )
        );
    }

    public function getName()
    {
        return 'customize_sample';
    }
}

ServiceProviderで定義

作ったFormTypeを利用するには、ServiceProviderで定義する必要があるので、「app/Plugin/TestPlugin/ServiceProvider/TestPluginServiceProvider.php」を編集します。

<?php

namespace Plugin\TestPlugin\ServiceProvider;

use Eccube\Application;
use Silex\Application as BaseApplication;
use Silex\ServiceProviderInterface;

class TestPluginServiceProvider implements ServiceProviderInterface
{
    public function register(BaseApplication $app)
    {
        $app->match(
            '/'.$app['config']['admin_route'].'/test',
            'Plugin\TestPlugin\Controller\Admin\TestPluginController::index'
        )->bind('test');

		// FormType ここから下5行を追加
        $app['form.types'] = $app->share($app->extend('form.types', function ($types) use ($app) {
            $types[] = new \Plugin\TestPlugin\Form\Type\TestFormType();
            return $types;
        }));
    }

    public function boot(BaseApplication $app)
    {
    }
}

ControllerでFormTypeを呼び出す

app/Plugin/TestPlugin/Controller/Admin/TestPluginController.php

<?php

namespace Plugin\TestPlugin\Controller\Admin;

use Eccube\Application;
use Symfony\Component\HttpFoundation\Request;

/**
 * Class TestPluginController admin.
 */
class TestPluginController
{
    public function index(Application $app, Request $request)
    {
		$builder = $app['form.factory']->createBuilder('customize_sample')->getForm();  //←追加
        return $app->render('TestPlugin/Resource/template/admin/test.twig', array(
		'builder'   		=> $builder->createView()  //←追加
		));
    }
}

twigファイルの編集

「app/Plugin/TestPlugin/Resource/template/admin/test.twig」

{% extends 'default_frame.twig' %}

{% block main %}
    <div class="row">
        <div class="col-md-12">
            <p class="text-danger">こんにちわ</p>
        </div>
    </div>
	<div class="row">
        <div class="col-md-4">
            <p>テスト項目</p>
        </div>
		<div class="col-md-8">
            <p>{{ form_widget(builder.plg_test ) }}</p>
        </div>
    </div>
	
{% endblock %}

これで「http://[EC-CUBEインストール先]/admin/test」というURLでテスト項目が追記されると思います。

管理画面側フックの一部抜粋

「商品管理」

商品マスター(検索条件部分)
admin.product.index.initialize:
商品マスター(一覧からの規格登録)
admin.product.product.class.index.initialize:
規格登録
admin.product.class.name.index.initialize:
カテゴリ登録
admin.product.category.index.initialize:

「受注管理」

受注マスター(検索条件部分)
admin.order.index.initialize:
受注登録
admin.order.edit.index.initialize:

「会員管理」

会員マスター(検索条件部分)
admin.customer.index.initialize:
会員登録
admin.customer.edit.index.initialize:

「コンテンツ管理」

新着情報管理(編集)
admin.content.news.edit.initialize:
ページ管理(編集)
admin.content.page.edit.initialize:
ブロック管理(編集)
admin.content.block.edit.initialize:

「設定」→「基本情報設定」

ショップマスター
admin.setting.shop.shop.index.initialize:
特定商取引法
admin.setting.shop.trade.law.index.initialize:
利用規約設定
admin.setting.shop.customer.agreement.index.initialize:
CSV出力項目設定
admin.setting.shop.csv.index.initialize:

「設定」→「システム情報設定」

権限管理
admin.setting.system.authority.index.initialize:
EC-CUBE ログ管理
admin.setting.system.log.index.initialize:

あれ?反映されないな、と思ったら

「コンテンツ管理」→「キャッシュ管理」から「plugin」にチェックをいれて「キャッシュ削除」をクリックしてみましょう。