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

2018.10.30
［最終更新日］2018.10.23
EC-cube

【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でテスト項目が追記されると思います。