データベース拡張によって新しく作成した商品項目を、管理画面から追加登録できるようにするには？
この記事では、カスタマイズで新たに作成したオリジナルの商品項目を、EC-CUBE管理画面の商品登録からセーブできるようにする方法を紹介します。
なお、オリジナル項目については事前にデータベース（エンティティ）を拡張しておく必要があります。
本記事でもデータベース（エンティティ）拡張後の状態から解説しているので、未対応の方は こちらの記事 を先に読んでみてください。
本記事では、商品テーブル（dtb_product）に『生産地』という項目を追加した状態から進めます。
データベースに新しい項目を追加する方法は こちら
カスタマイズの流れ
全体の流れは大きく以下の2つです。（エンティティの拡張を除く）
順々に解説します。
- 商品登録フォームの拡張（「ProductTypeExtension.php」を作成）
- 管理画面を表示するTwigファイル（「product.twig」）の追記
商品登録フォームの拡張
まず、商品を登録するためのフォームを拡張します。
管理画面のフォームは、「src/Eccube/Form/Type/Admin」下に格納されていますが、こちらを修正するのは例によってオススメできないので、「app/Customize/Form」下に新しくフォルダを作成し、その中に「ProductTypeExtension.php」という元々のフォームを拡張するためのファイルをアップします。
EC-CUBE側で用意されているファイルで、ここは基本的にいじりません。
「ProductTypeExtension.php」のコードは以下に記載します。
ProductTypeExtension.php（ProductTypeの拡張ファイル）
<?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\Component\Form\FormBuilderInterface;
class ProductTypeExtension extends AbstractTypeExtension
{
// どのフォームを拡張するかを宣言
public static function getExtendedTypes(): iterable
{
return [ProductType::class];
}
public function buildForm(FormBuilderInterface $builder, array $options)
{
// 追加したいフォームを記述
$builder
->add('production_area', TextType::class, [
'required' => false
]);
}
}- 13〜16行目
-
どのフォームを拡張するかをここで宣言します。
記述の方法ですが、EC-CUBEのバージョンによって変わるようです。
上記コードは4.1以降を対象に作成していますので、適宜変更してください。- EC-CUBE 4.0 の場合
-
public function getExtendedType() { return ProductType::class; } - EC-CUBE 4.1 以降の場合
-
public static function getExtendedTypes(): iterable { return [ProductType::class]; }
- 21〜24行目
-
$builder変数に、追加したいフォームの項目書き込んでいきます。
ここでは「production_area」という項目を、テキストで入力し、空欄も可、というシンプルな設計になっています。複数項目を追加したい場合は、「->add()」を続けて同じように記載します。
上記コードを記述したファイル（ProductTypeExtension.php）を作成したら、先述のディレクトリ「app/Customize/Form/Extension/Admin」にアップします。（フォルダがない場合はフォルダも作成します。）
管理画面のTwigファイルを修正
次に、管理画面の表示を修正します。
管理画面のTwigファイルは「src/Eccube/Resource/template/admin/Product」下に格納されていますが、こちらを修正するのはやはりオススメできないので、「app/template/admin」下に新しく「Product」フォルダを作成し、そこに元々のTwigファイルをコピーしてから修正します。
EC-CUBE側で用意されているファイルで、今回は商品登録画面と紐づく「product.twig」ファイルを「app/template/admin/Product」にコピーします。
「src」下の「product.twig」をここにコピーし、それを編集します。コードは以下に記載します。
上述の「product.twig」ファイルには1,000行近くもある長いコードが記述されています。
以下コードを、516行目あたりに追記します。
<div class="row">
<div class="col-3">
<div class="d-inline-block">
<span>生産地</span>
</div>
</div>
<div class="col mb-2">
<div>
{{ form_widget(form.production_area) }}
{{ form_errors(form.production_area) }}
</div>
</div>
</div>- 追記する場所によって、「生産地」の表示・入力場所が変わります。この辺はお好みで。
- 本記事では、「発送日目安」を表示するコード（<div class=”row”></div>に囲まれた「delivery_duration」に関するコード）の下に記述しています。
キャッシュを削除して管理画面を確認してみよう
ここまでで準備完了です。
管理画面からキャッシュを削除して、商品登録ページを確認しましょう。
商品登録画面に新しい項目が追加されていればOKです！
応用編
ドロップダウンリストやチェックボックスの実装
今回実装したフォームは、文字や数字など好きなテキストを自由に入力・登録できますが、予め決められた範囲の内容のみを登録したいケースもあるでしょう。
そんなときは、事前に用意した選択肢から選ぶドロップダウンリスト（プルダウン）やチェックボックス、ラジオボタンをフォームにすることも可能です。
詳細は以下記事にて解説していますので、合わせてご覧ください。
入力を必須にする
以下記事で、実装したフォームを入力必須（未入力の場合はアラート表示）にする方法を紹介しています。
まとめ
以上、商品登録画面に新しい項目を追加し、データベースを更新できるようにするカスタマイズ方法を紹介しました。
データベースの更新は、こちらの記事 で解説したエンティティの拡張ができていれば、直接SQLで反映させてもOKです。が、その場合はデータベースにアクセスできる管理者しか更新できず、作業が煩雑になりがちです。
管理画面はユーザーの目に触れる部分ではないため、カスタマイズを後回しにしがちなのですが・・・作業効率を上げるためにも、ぜひ取り組んでほしいと思います！