【EC-CUBE 4】商品登録にオリジナルの新規項目を追加する方法

この記事では、データベース拡張で追加したオリジナルの商品プロパティを、管理画面の商品登録から保存できるようにする方法を紹介します。

商品登録画面:修正前
商品登録画面_オリジナル(編集前)
デフォルトで用意された商品登録画面
商品登録画面:修正後
商品登録画面_編集後
『生産地』という新しい項目を追加し、登録できるようにした画面

本記事では、商品テーブル(dtb_product)にproduction_areaという生産地を保存するプロパティを追加した状態から進めます。

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

目次

カスタマイズの流れ

全体の流れは大きく以下の2つです。

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

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

STEP

商品登録フォーム(ProductType.php)の拡張

まず、商品を登録するためのフォームを拡張します。

管理画面のフォームは「src/Eccube/Form/Type/Admin」下に格納されています。

ProductTypeのディレクトリ
「src/Eccube/Form/Type/Admin」下に、管理画面に関わるフォームファイルが格納されています。

EC-CUBE側で用意されているファイルで、ここは基本的にいじりません。

今回は「app/Customize」下に新しくフォルダを作成し、その中に「ProductTypeExtension.php」という元々のフォームを拡張するためのファイルをアップします。

<?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
{
  // どのフォームを拡張するかを宣言(EC-CUBEのバージョンによって記述方法が異なる)
  public static function getExtendedTypes(): iterable
  {
      yield ProductType::class; // ProductTypeを拡張
  }

  public function buildForm(FormBuilderInterface $builder, array $options)
  {
      // 追加したいフィールドを記述
      // TextTypeで文字列を入力するフィールドを指定
      // 「'required' => false」で入力必須ではないことを指定
      $builder
          ->add('production_area', TextType::class, [
              '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;
}

詳しくは 公式サイト もご確認ください。

作成したExtensionファイルを「app/Customize/Form/Extension/Admin」にアップします。

ProductTypeExtensionの格納先
拡張ファイルの保存先

「Form」「Extension」「Admin」のフォルダはデフォルトでは存在しないため、これらも新規作成します。

STEP

管理画面のTwigテンプレートを修正

次に、管理画面の表示を修正します。

管理画面のTwigテンプレートは「src/Eccube/Resource/template/admin/Product」下に格納されています。
これは直接修正せず、「app/template/admin」下に新しく「Product」フォルダを作成、そこに元々のTwigテンプレートを複製し、それを修正します。

管理画面のTwigテンプレート格納場所
Product.twigのディレクトリ
「src/Eccube/Resource/template/admin」下に、管理画面に関わるTwigテンプレートが格納されています。

EC-CUBE側で用意されているファイルで、今回は商品登録画面と紐づく「product.twig」を「app/template/admin/Product」にコピーします。

Twigテンプレートの複製先
Product.twigをapp下に複製
管理画面の商品登録画面を表示するTwigテンプレート格納ディレクトリ。「app/template/admin」下にフォルダを新規作成します。

先の「product.twig」をここにコピーし、コピーしたものを修正します。コードは以下に記載します。

「product.twig」ファイルには1,000行近くもある長いコードが記述されています。
このコードの任意の場所に、「生産地」という項目を入力するためのフィールド要素(以下)を、挿入します。

<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>

今回の実装では、登録画面・商品情報欄の一番下(発送日目安の下)に追加したかったため、550行目付近{# エンティティ拡張の自動出力 #}というコメントの上に追記しました。

STEP

キャッシュの削除

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

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

商品登録画面に新しい項目が追加されていればOKです!

商品登録画面_編集後
『発送日目安』の下に『生産地』という新しい項目が追加され、データベースを更新できるようになった!

応用編

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

ドロップダウンリストやチェックボックスの実装

今回実装したフォームは、文字や数字など好きなテキストを自由に入力・登録できますが、予め決められた範囲の内容のみを登録したいケースもあるでしょう。

そんなときは、事前に用意した選択肢から選ぶドロップダウンリスト(プルダウン)やチェックボックス、ラジオボタンをフォームにすることも可能です。

詳細は以下記事にて解説していますので、合わせてご覧ください。

エンティティタイプの実装

別のテーブルと紐づいたカラムにデータを追加する場合、EntityTypeというフォームタイプを使用します。

入力を必須にする

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

まとめ

以上、商品登録画面に新しい項目を追加し、データベースを更新できるようにするカスタマイズ方法を紹介しました。

データベースの更新は、こちらの記事 で解説したエンティティの拡張ができていれば、直接SQLで反映させてもOKです。
が、その場合はデータベースにアクセスできる管理者しか更新できず、作業が煩雑になりがちです。

管理画面はユーザーの目に触れる部分ではないため、カスタマイズを後回しにしがちなのですが・・・作業効率を上げるためにも、ぜひ取り組んでほしいと思います!

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