EC-CUBE のカラムを増やすメリットと入力項目をカスタマイズする方法

[最新更新] 2022年07月18日
[初回公開] 2020年11月02日

EC-CUBE は無料で利用できるオープンソースの EC サイトプログラム群で、自由にカスタマイズできるのが特徴だが、今回は管理画面でデザインを変更するだけでなく、より利便性を高めるために直接プログラムやデータベースのカラムをカスタマイズする方法を紹介する。

１．EC-CUBE にカラム追加するメリット

EC-CUBE にカラム追加するメリットととしては、初期インストールした状態からさらに扱いたい情報を増やして商品情報をより詳細に説明したり、商品のバリエーションの幅を広げる、そして会員情報のマーケティングなど多岐に渡る。

EC-CUBE では商品名や販売価格を始め、会員情報の登録に必要な情報や受発注履歴に関する情報などを保存するためにデータベースのカラムとして分けられている。
初期インストール時はこのカラムに数が限りがあるため、新たに入力項目を増やしたい場合は管理画面に入力欄を追加するだけでなく、データベースのカラムも追加する必要がある。

カラム追加などカスタマイズは知識と手間がかかるものの、利便性と販売促進につなげることができる。
例えば会員登録であれば既婚・未婚や子供の有無を入力する欄を記入することで、今後商品を仕入れる上で独身向けまたは家族向けの商品に比重を置くかの指針にしたり、商品登録画面であれば商品名の他に製造メーカーや販売開始年など販売する商品の情報をより詳細にわかりやすく紹介することで、購入者は商品を手に取らずとも商品購入の判断材料にすることができる。

２．バージョン 4 系の入力欄とカラムの状態

今回は商品登録画面にショップ用のメモ欄を追加するとともに、追加した入力欄の情報を保存するカラムを追加する方法を次に紹介する。
そのためまず EC-CUBE をインストールした直後の状態を確認してカスタマイズした内容が反映されているかその差を確認する。

上図は EC-CUBE の管理画面に入力欄を新たに追加する前の商品登録画面の様子である。
画面右下にショップ用のメモ欄があるのがわかる。

次にデータベースの商品情報のテーブルの構造を確認する。
上図のように商品情報はテーブル「dtb_product」に格納され、管理画面内にあるショップ用のメモ欄はカラム「note」となっているのがわかる。

ここから、カラムの追加と管理画面のカスタマイズの手順が次の通りである。

３．バージョン 4 系でのカラムの追加方法

EC-CUBE のバージョン 4 系は旧バージョンとなる 3 系以前とプログラムの構成やインストール方法が異なっており、直接データベースを操作してカラムを追加しなくてもプログラムファイルを置くことで追加できるようになっている。

まずは /app/Customize/Entity のディレクト内に、ProductTrait.php というファイルを用意する。
ProductTrait.php に記載する内容は次の通りである。

<?php
namespace Customize\Entity;
use Doctrine\ORM\Mapping as ORM;
use Eccube\Annotation\EntityExtension;

/**
 * @EntityExtension("Eccube\Entity\Product")
 */
trait ProductTrait
{
    /**
     * @var string|null
     * @ORM\Column(type="string", length=3000, nullable=true)
     * @Eccube\Annotation\FormAppend(
     *     auto_render=false,
     *     type="\Symfony\Component\Form\Extension\Core\Type\TextType",
     *     options={
     *          "required": false,
     *          "label": "備考その２",
     *          "attr": {"placeholder": "例：備考その２"}
     *     })
     */
    private $note2;

    /**
     * @return string|null
     */
    public function getNote2()
    {
        return $this->note2;
    }

    /**
     * @param string|null $note2
     * @return ProductTrait
     */
    public function setNote2($note2)
    {
        $this->note2 = $note2;
        return $this;
    }
}

上記のプログラムは 2 つ目となるショップ用のメモ欄を note2 というプロパティ名で追加し、getNote2() と setNote2($note2) で note2 の値を取得したり変数に格納するように定義している。

コメント欄にある @ORM\Column は実際にカラムを追加する構造を指定している。
@Eccube\Annotation\FormAppend はアノテーションにより、商品データ(Product エンティティ)を元に使用するフォームへ入力欄の定義を行なっている。

次に用意した ProductTrait.php を EC-CUBE に認識させるために proxy ファイルを次のコマンドを実行する。

# php /{EC-CUBE を設置したフルパス}/bin/console eccube:generate:proxies
gen -> /{EC-CUBE を設置したフルパス}/app/proxy/entity/src/Eccube/Entity/Product.php

上記の bin/console のコマンドが成功するとコマンドの下の行の gen が表示されるとともに、実際のサーバ上においても /{EC-CUBE を設置したフルパス}/app/proxy/entity/src/Eccube/Entity/ に Product.php というファイルが自動で生成される。
最後にこの生成された Product.php を利用して PHP ファイルを実行してデータベースにカラムを追加する。

# php /{EC-CUBE を設置したフルパス}/bin/console cache:clear –no-warmup
# php /{EC-CUBE を設置したフルパス}/bin/console eccube:schema:update –force –dump-sql

1 行目はキャッシュをクリアし、2 行目で実際のテーブルにカラムを追加している。
PHP コマンドで実行しているが、裏ではカラムを追加する ALTER TABLE の SQL が実行されているため、手動でデータベース操作するのを PHP が代行してくれている。

カラムを追加した後の状態が上図となり、note2 が追加されているのが確認できる。

４．バージョン 4 系での入力欄の追加方法

上記 3 でカラムの追加ができたので、次は管理画面にショップ用のメモ欄をテキストボックスで追加する。
修正する PHP ファイルはサーバ上で次のコマンドで開いて修正してもよいし、手元のテキストエディタ等で修正したファイルをアップロードしてもよい。

# vi /{EC-CUBE を設置したフルパス}/src/Eccube/Resource/template/admin/Product/product.twig

product.twig は実際に HTML タグ等を記入するテンプレートファイルとなり、「ショップ用メモ欄」の記述に続けて下記を追記する。

<div class="collapse show ec-cardCollapse" id="shopMemo2">
    <div class="card-body">
        {{ form_widget(form.note2, { attr : { rows : "8"} }) }}
        {{ form_errors(form.note2) }}
    </div>
</div>

５．バージョン 4 系で追加した入力欄を確認する

以上の作業で商品登録画面を表示すると画面右下のショップ用メモ欄に「備考 2」のテキストボックスが追加になっているのが確認できる。

実際に追加したテキストボックスに文字列を入れて商品情報を登録したり更新した後、直接 SQL でデータの状況を確認すると note2 に値が入っていることも確認できる。

関連記事