以下記事の応用編として、EC-CUBE管理画面の商品登録から、関連エンティティ(Maker)を追加できるフォームの生成方法を紹介します。
デバッグモードを設定しておくと、エラーが起きたときに詳細情報が表示されるようになります。
エラー箇所を探しやすくなるので、開発前に設定しておくのをオススメします。
デバッグモードの設定方法については 以下記事 で解説しています。
カスタマイズ後は、デバッグモードの解除を忘れないように。
カスタマイズの流れ
全体の流れは 以前の記事 と同じで、以下の2つです。
- 商品登録フォームの拡張(ProductTypeExtension.phpの作成)
- 管理画面を表示するTwigテンプレート(product.twig)の修正
なお、本記事ではフォームの拡張方法について詳しく触れていませんので、詳細は以下記事を参考にしてみてください。
商品登録フォーム(ProductType.php)の拡張
まず、商品を登録するためのフォームを拡張します。
「app/Customize/Form/Extension/Admin」に「ProductTypeExtension.php」という既存のフォーム(ProductType.php)を拡張するためのファイルをアップします。(Form/Extension/Adminまでのフォルダがない場合は、フォルダも作成します。)
ProductTypeExtension の全コードはこちら
<?php
namespace Customize\Form\Extension\Admin;
use Eccube\Form\Type\Admin\ProductType;
use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Bridge\Doctrine\Form\Type\EntityType;
use Symfony\Component\Form\FormBuilderInterface;
use Customize\Entity\Maker;
class ProductTypeExtension extends AbstractTypeExtension
{
// どのフォームを拡張するかを宣言(EC-CUBEのバージョンによって記述方法が異なる)
public static function getExtendedTypes(): iterable
{
yield ProductType::class; // ProductTypeを拡張
}
public function buildForm(FormBuilderInterface $builder, array $options)
{
// 追加したいフォームを記述
$builder
->add('production_area', TextType::class, [
'required' => false
])
->add('maker', EntityType::class, [
'class' => Maker::class,
'choice_label' => 'name',
'required' => false
]);
}
}
フォームの拡張宣言は、EC-CUBEのバージョンによって変わるようです。
上記コードは4.1以降を対象に作成していますので、適宜変更してください。
- EC-CUBE 4.0 の場合
-
public function getExtendedType() { return ProductType::class; }
- EC-CUBE 4.1 以降の場合
-
public static function getExtendedTypes(): iterable { yield ProductType::class; }
詳しくは 公式サイト もご確認ください。
以前の記事で、すでにProductTypeExtension.phpを作成済の場合は、以下コードを追記してください。
- useステートメントの追加
-
use Symfony\Bridge\Doctrine\Form\Type\EntityType; use Customize\Entity\Maker;
EntityTypeの名前空間は、他のフィールドタイプと異なります。
「Symfony\Component\Form\Extension\Core\Type\EntityType」ではないので注意! - EntityTypeフォームの追加
-
->add('maker', EntityType::class, [ 'class' => Maker::class, 'choice_label' => 'name', 'required' => false ]);
-
この実装では、
maker
というフィールドをProductType
に追加しています。まず
class
オプションでどのエンティティを取得するか指定します。(この実装ではMaker
エンティティを指定しています。)次に
Maker
エンティティのリストをドロップダウンで表示します。choice_label
は、ドロップダウンリストに表示されるエンティティのプロパティを指定します。(この実装ではname
プロパティを使用しており、メーカー名から選べるようになっています。)
管理画面のTwigテンプレートを修正
次に、管理画面の表示を修正します。
「app/template/admin/Product」に、以下コードを追記した「product.twig」ファイルをアップします。
<div class="row">
<div class="col-3">
<div class="d-inline-block">
<span>{{ 'メーカー'|trans }}</span>
</div>
</div>
<div class="col mb-2">
<div>
{{ form_widget(form.maker) }}
{{ form_errors(form.maker) }}
</div>
</div>
</div>
- 「Product.twig」の元ファイルは「src/Eccube/Resource/template/admin/Product」に格納されているので、これを複製して上記コードを追加します。
- 今回の実装では、登録画面・商品情報欄の一番下(発送日目安の下)に追加したかったため、550行目付近
{# エンティティ拡張の自動出力 #}
というコメントの上に追記しました。
キャッシュの削除
ここまでで準備完了です。
管理画面からキャッシュを削除して、商品登録ページを確認しましょう。
商品登録画面に新しい項目(本実装例の場合はメーカー)が追加されていればOKです!
応用編
今回はエンティティタイプ/任意入力(未入力可)/ドロップダウン式のフィールドを追加しました。
エンティティタイプ以外のフィールドや、入力必須のフィールドを追加する方法についても、本サイトで紹介しています。
ドロップダウンリスト(エンティティタイプではない)やチェックボックスの実装
事前に用意した選択肢から選ぶドロップダウンリスト(プルダウン)やチェックボックス、ラジオボタンを実装する方法は、以下記事にて解説しています。
入力を必須にする
以下記事で、実装したフォームを入力必須(未入力の場合はアラート表示)にする方法を紹介しています。