16
14

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 3 years have passed since last update.

EC-CUBEAdvent Calendar 2019

Day 13

[EC-CUBE4] FormType>buildFormのカスタマイズで独自formを使用する

Last updated at Posted at 2019-12-12

環境

 ・Eccube 4.0.3

#対象
 ・Eccube4プラグイン開発初心者向け

概要

 Eccube4公式開発ドキュメントにあるサンプルプラグインを参考にプラグイン開発をしていたところ、
 FormType>buildFormで既存画面への独自フォームの設定方法がわからず困ったことがあったので今回記事にしました。

 プラグインの作成手順と既存画面へフォームを追加拡張は以下の公式ドキュメントのページを参考にしてください。
 【EC-CUBE 4.0 開発者向けドキュメント】プラグイン仕様
 【EC-CUBE 4.0 開発者向けドキュメント】FormTypeのカスタマイズ

プラグインの内容

 プラグインで追加した機能としては
 ・商品登録に項目とフォームを追加
 ・商品一覧の検索項目にプラグインの項目を追加

###商品登録
商品登録.png

###商品検索
商品検索.png

 問題点は、商品検索に自動生成で追加されたフォームが長すぎること。
 せめて今より半分くらいのサイズにしたい・・・。

独自フォームを作成、設定する

公式ドキュメントではEntityカスタマイズの@FormAppendアノテーションを用いてformの設定をしているが、
この記事では、FormTypeのbuildFormを使ってフォームの設定をします。

【EC-CUBE 4.0 開発者向けドキュメント】Entityのカスタマイズ

###独自フォームを記入したtwigファイルの作成

Plugin\SamplePlugin\template\admin\Product\form\search_product_sample_form.twig
{%- block form_row -%}
  <div class="col">
    <div>
      {{ form_label(form) }}
      <div class="row">
        <div class="col-5">
          {{ form_widget(form) }}
          {{ form_errors(form) }}
        </div>
        <div class="col-7"></div>
      </div>
    </div>
  </div>
{%- endblock form_row -%}

 独自フォームのtwigファイルを作成します。
 {%- block form_row -%} {%- endblock form_row -%}のブロックの間に記入した内容が表示されます。

###twigファイルをbuildFormに設定

Plugin\SamplePlugin\Form\Type\Extension\SearchProductTypeExtension.php

    public function getExtendedType()
    {
        return SearchProductType::class; // 拡張するフォーム
    }
    
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
	   $builder->add('sample', SampleMasterType::class, [
	    	'label' => 'サンプルセレクトボックス',
		    'required' => false,
		    'eccube_form_options' => [
			    'auto_render' => true, // 自動表示フラグ
			    'form_theme' => '@SamplePlugin/admin/Product/form/search_product_sample_form.twig' // 表示したいtwigファイル
		    ]
	    ]);
    }

 builder作成時のオプションに設定をしていきます。

 'auto_render' => true, // 自動表示フラグ	  

 auto_renderは拡張先に追加フォームを表示するか否かの設定項目です。
 初期設定ではfalseが設定され非表示になるので、trueを設定します。

 'form_theme' => '@SamplePlugin/admin/Product/form/search_product_sample_form.twig' // 表示したいtwigファイル

 form_themeには作成したTwigを指定します。指定していない場合は自動生成されたデザインが適応されます。

###独自フォーム適応後
独自フォーム適用.png

理想のフォームサイズを実装することが出来ました。

プロジェクトツリー

app/Plugin/SamplePlugin
├── Entity
│   ├── Extension
│   │   └── ProductTrait.php
│   └── Master
│       └── SampleMaster.php
├── Form
│   └── Type
│       ├── Extension
│       │   ├── ProductTypeExtension.php
│       │   └── SearchProductTypeExtension.php
│       └── Master
│           └── SampleMasterType.php
├── Repository
│   ├── Master
│   │   └── SampleMasterRepository.php
│   ├── ProductSearchWhereCustomizer.php
│   └── SampleRepository.php
├── Resource
│   └── template
│       └── admin
│           └── Product
│               └── form
│                   └── search_product_sample_form.twig
├── composer.json
└── PluginManager.php
16
14
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
16
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?