【EC-CUBE 4】EntityTypeを使ってフォームを追加する方法

以下記事の応用編として、EC-CUBE管理画面の商品登録から、関連エンティティ(Maker)を追加できるフォームの生成方法を紹介します。

実装後の商品登録画面
実装後の商品登録の管理画面
「メーカー」という項目を作成し、関連付けたいMakerエンティティをプルダウンでメーカー名から選べるようにしました。
メーカー名を選ぶと、該当するidがProductテーブル(dtb_product)のmaker_idカラムに追加されます。

【動作環境】
EC CUBEのバージョン:4.2.1
サーバー:Xserver

開発前にデバッグモードの設定をお薦めします

デバッグモードを設定しておくと、エラーが起きたときに詳細情報が表示されるようになります。
エラー箇所を探しやすくなるので、開発前に設定しておくのをオススメします。
デバッグモードの設定方法については 以下記事 で解説しています。

カスタマイズ後は、デバッグモードの解除を忘れないように。

目次

カスタマイズの流れ

全体の流れは 以前の記事 と同じで、以下の2つです。

  • 商品登録フォームの拡張(ProductTypeExtension.phpの作成)
  • 管理画面を表示するTwigテンプレート(product.twig)の修正

なお、本記事ではフォームの拡張方法について詳しく触れていませんので、詳細は以下記事を参考にしてみてください。

STEP

商品登録フォーム(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のバージョンによって変わります!

フォームの拡張宣言は、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プロパティを使用しており、メーカー名から選べるようになっています。)

STEP

管理画面の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行目付近{# エンティティ拡張の自動出力 #}というコメントの上に追記しました。
STEP

キャッシュの削除

ここまでで準備完了です。
管理画面からキャッシュを削除して、商品登録ページを確認しましょう。

キャッシュの削除方法
管理画面のキャッシュ管理からキャッシュを削除できます。

商品登録画面に新しい項目(本実装例の場合はメーカー)が追加されていればOKです!

実装後の商品登録の管理画面
『フリーエリア』の上に『メーカー』という新しい項目(プルダウン式)が追加され、データベースを更新できるようになった!
ちなみに『生産地』は 以前の記事 で追加した項目です。

応用編

今回はエンティティタイプ/任意入力(未入力可)/ドロップダウン式のフィールドを追加しました。
エンティティタイプ以外のフィールドや、入力必須のフィールドを追加する方法についても、本サイトで紹介しています。

ドロップダウンリスト(エンティティタイプではない)やチェックボックスの実装

事前に用意した選択肢から選ぶドロップダウンリスト(プルダウン)やチェックボックス、ラジオボタンを実装する方法は、以下記事にて解説しています。

入力を必須にする

以下記事で、実装したフォームを入力必須(未入力の場合はアラート表示)にする方法を紹介しています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次