- 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でテスト項目が追記されると思います。
管理画面側フックの一部抜粋
「商品管理」
- 商品マスター(検索条件部分)
- 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」にチェックをいれて「キャッシュ削除」をクリックしてみましょう。