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

7677 ワード
eccube4 EC-CUBE EC-CUBE テキストリンク

環境

　・Eccube 4.0.3

対象

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

概要

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

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

プラグインの内容

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

商品登録

商品検索

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

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

公式ドキュメントでは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を指定します。指定していない場合は自動生成されたデザインが適応されます。

独自フォーム適応後

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

プロジェクトツリー

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