【EC-CUBE 4】商品登録時に新規項目を追加できるようにする方法

EC-CUBE4の管理画面カスタマイズ 商品登録に新しい項目を追加する方法

データベース拡張によって新しく作成した商品項目を、管理画面から追加登録できるようにするには?

この記事では、カスタマイズで新たに作成したオリジナルの商品項目を、EC-CUBE管理画面の商品登録からセーブできるようにする方法を紹介します。

なお、オリジナル項目については事前にデータベース(エンティティ)を拡張しておく必要があります。
本記事でもデータベース(エンティティ)拡張後の状態から解説しているので、未対応の方は こちらの記事 を先に読んでみてください。

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

本記事では、商品テーブル(dtb_product)に『生産地』という項目を追加した状態から進めます。
データベースに新しい項目を追加する方法は こちら

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

目次

カスタマイズの流れ

全体の流れは大きく以下の2つです。(エンティティの拡張を除く)
順々に解説します。

  • 商品登録フォームの拡張(「ProductTypeExtension.php」を作成)
  • 管理画面を表示するTwigファイル(「product.twig」)の追記

商品登録フォームの拡張

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

管理画面のフォームは、「src/Eccube/Form/Type/Admin」下に格納されていますが、こちらを修正するのは例によってオススメできないので、「app/Customize/Form」下に新しくフォルダを作成し、その中に「ProductTypeExtension.php」という元々のフォームを拡張するためのファイルをアップします。

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

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

フォームを拡張するファイルの保存先
ProductTypeExtensionの格納先
「app/Customize/Form/Extension/Admin」下に拡張ファイルを格納します。(フォルダも新規作成します。)

「ProductTypeExtension.php」のコードは以下に記載します。

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
{
  public static function getExtendedTypes(): iterable
  {
      return [ProductType::class];
  }

  public function buildForm(FormBuilderInterface $builder, array $options)
  {
      $builder
          ->add('production_area', TextType::class, [
              'required' => false
          ]);
  }
}

デフォルトで用意されている「ProductType」を拡張するためのファイル。
後半のbuildForm関数に追加したい内容を記述することでフォームを拡張できる。

オレンジ部

拡張に必要な宣言。「static」という宣言をしないとエラーになります。(2022年8月)

緑部

$builder変数に、追加したいフォームの項目書き込んでいきます。
ここでは「production_area」という項目を、テキストで入力し、空欄も可、というシンプルな設計になっています。複数項目を追加したい場合は、「->add()」を続けて同じように記載します。

上記コードを記述したファイル(ProductTypeExtension.php)を作成したら、先述のディレクトリ「app/Customize/Form/Extension/Admin」にアップします。(フォルダがない場合は自分で作成します。)

管理画面のTwigファイルを修正

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

管理画面のTwigファイルは「src/Eccube/Resource/template/admin/Product」下に格納されていますが、こちらを修正するのはやはりオススメできないので、「app/template/admin」下に新しく「Product」フォルダを作成し、そこに元々のTwigファイルをコピーしてから修正します。

管理画面ののフォーム格納場所
Product.twigのディレクトリ
「src/Eccube/Resource/template/admin」下に、管理画面に関わるTwigファイルが格納されている

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

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

「src」下の「product.twig」をここにコピーし、それを編集します。コードは以下に記載します。

上述の「product.twig」ファイルには1,000行近くもある長いコードが記述されています。
以下コードを、516行目あたりに追記します。

product.twig
<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」に関するコード)の下に記述しています。
オレンジ部

実際に表示させたい内容や、登録したい項目名を記載します。(本記事では「生産地」および「production_area」)

キャッシュを削除して管理画面を確認してみよう

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

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

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

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

まとめ

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

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

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

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

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次