要望や症状
商品登録時の入力欄がinputタグで表示されており、より多くのテキストを入力しやすいようにtextareaタグに変更したい。
対象画面
管理画面の商品登録・編集画面における各種入力フィールドが対象となります。デフォルトの状態では、商品名やその他のテキストフィールドが一行のinput要素として表示されるため、長い文章を入力する際に不便を感じることがあります。
理由や原因
EC-CUBE 4系では、商品登録フォームはFormTypeクラスで定義されており、各フィールドのHTMLタグタイプもここで指定されています。デフォルトでは多くのフィールドがTextTypeで定義されているため、input要素として出力される仕組みになっています。このため、複数行のテキスト入力が必要な場合でも一行の入力欄として表示されてしまいます。
解決策
FormTypeExtensionを使用して、既存の商品登録フォームの入力フィールドをtextareaに変更することで解決できます。
Customizeディレクトリでの拡張手順
1. FormTypeを拡張するためのカスタマイズクラスを作成する
以下のファイルを作成して、商品フォームを拡張します。
// app/Customize/Form/Extension/ProductTypeExtension.php
<?php
namespace Customize\Form\Extension;
use Eccube\Form\Type\Admin\ProductType;
use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Form\FormBuilderInterface;
class ProductTypeExtension extends AbstractTypeExtension
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
// 商品名をtextareaに変更する例
$builder->add('name', TextareaType::class, [
'attr' => [
'rows' => 3,
'maxlength' => 255,
],
]);
}
public static function getExtendedTypes(): iterable
{
return [ProductType::class];
}
}
2. サービス定義ファイルを作成してFormTypeExtensionを登録する
Extensionクラスをサービスとして登録するため、以下のファイルを作成します。
# app/Customize/Resource/config/services.yaml
services:
Customize\Form\Extension\ProductTypeExtension:
tags:
- { name: form.type_extension, extended_type: Eccube\Form\Type\Admin\ProductType }
3. キャッシュをクリアして変更を反映する
変更内容を反映させるため、以下のコマンドを実行してキャッシュをクリアします。
bin/console cache:clear
複数フィールドを変更する場合
複数のフィールドを同時にtextareaに変更したい場合は、buildFormメソッド内で複数のaddメソッドを記述します。
// 複数フィールドの例
public function buildForm(FormBuilderInterface $builder, array $options)
{
// 商品名
$builder->add('name', TextareaType::class, [
'attr' => ['rows' => 3],
]);
// 商品説明（既存がTextareaTypeの場合は行数変更）
$builder->add('description_detail', TextareaType::class, [
'required' => false,
'attr' => ['rows' => 8],
]);
}
実装時の注意点
FormTypeExtensionは既存のフィールド定義を上書きするため、必要な制約（maxlength等）は明示的に指定する必要があります。バリデーション設定も元のFormTypeから引き継がれますが、必要に応じて再定義を検討してください。また、EC-CUBEのアップデート時にFormTypeの仕様変更があった場合、カスタマイズの見直しが必要になる可能性があることも考慮しておきましょう。