【応用可】商品登録にオリジナルの項目を追加【Eccube4】 - エンジニ屋.com(エンジニヤドットコム)

実現したいこと

商品登録画面にJANコードを追加したい

開発言語等

Eccube4.0.6

イメージ画像(カスタマイズ後)

f:id:enginiya:20211028215721p:plain

実装開始

1．商品登録のフォームに関しては、src/Eccube/Form/Type/Admin/ProductType.phpのファイルで作成されているので、このファイルを拡張してJANコードのフォームを作成していきます。 *ここからはsrc/Eccube... のディレクトリ内のファイル群を指すときは、%Eccube%/ファイル名と略称させてもらいますので実際に実装される際はファイル名で検索を掛けて下さい。それでは、拡張ファイルを作成します。 app/Customize/Form/Extension/Admin/ProductTypeExtension.php デフォルトでディレクトリは用意されていないので、ディレクトリの作成もしてください。ファイル名にも気を付けてください。

ファイル内に下記ソースコードを記述します。ポイントについて、ソースコード内でコメントアウトしています。

<?php

namespace Customize\Form\Extension\Admin;

#必要なclassを記述
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 function getExtendedType() #拡張に必要な宣言
    {
        return ProductType::class;
    }

  public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            //Janコード
            ->add('jan_code', TextType::class, [ #バリデーションは無し、入力はテキスト
                'required' => false #必須は無し
            ]);
    }
}

2.次にDBからデータを保存したり取得したりする為のEntityを作成します。 %Eccube%/Entity/Product.phpの拡張を行いたいので、Entityの場合はTraitを使います。 app/Customize/Entity/ProductTrait.phpのファイルを作成します。こちらに下記ソースコードを記述します。

<?php

namespace Customize\Entity;

#Entityの拡張の為、必要なclassを宣言
use Eccube\Annotation\EntityExtension;
use Eccube\Entity\Product;


/**
 * @EntityExtension("Eccube\Entity\Product") #Productを拡張と宣言
 */
trait ProductTrait
{

  /**
    * @var string
    *
    * @ORM\Column(name="jan_code", type="string", nullable=true) #カラム名はjan_code,タイプはstring,nullで良いかどうか
    */
    private $jan_code;

  /**
     * Set janCode.
     *
     * @param string|null $janCode
     *
     * @return Product
     */
    public function setJanCode($janCode) #setJancodeでDBに保存
    {
        $this->jan_code = $janCode;
        return $this;
    }


    /**
     * Get janCode.
     *
     * @return string
     */
        public function getJanCode() #getJanCodeでDBから取得
    {
        return $this->jan_code;
    }

}

3.ファイルを作成し終えたら、DBと連携の為にCUIで下記コマンドを入力していきます。

更新するファイルをproxyディレクトリ内に生成するコマンド

php bin/console eccube:generate:proxies

一度生成前のキャッシュをクリア

php bin/console cache:clear --no-warmup

ファイルでSQL を実行

php bin/console doctrine:schema:update --dump-sql --force

4.あとは表側の表示部分を作成していきます。 %Eccube%/Resorce/template/admin/Product/product.twigをコピーして、 app/template/admin/Product/product.twigに貼り付け 469行目あたり検索ワードの下に下記ソースコードを記述

<div class="row">
       <div class="col-3">
             <div class="d-inline-block">
                    <span {{ 'admin.product.jancode'|trans }}</span>
              </div>
        </div>
        <div class="col mb-2">
              <div>
                     {{ form_widget(form.jan_code) }}
                     {{ form_errors(form.jan_code) }}
              </div>
        </div>
</div>