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

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

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




1.EC-CUBE にカラム追加するメリット


EC-CUBE には商品名や販売価格を始め会員情報の登録に必要な情報や受発注履歴に関する情報などを保存するためにデータベースの項目ごとにカラムとして分けられている。
初期インストール時はこのカラムに数が限りがあるため新たに入力項目を増やしたい場合は画面に入力欄を追加するだけでなく、データベースのカラムも追加する必要がある。
カラム追加などカスタマイズは知識と手間がかかるものの、利便性が上がりより購入につなげることができる。
例えば会員登録であれば既婚・未婚や子供の有無を入力する欄を記入することで今後商品を仕入れる上で独身向けまたは家族向けの商品に比重を置くかの指針にしたり、商品登録画面であれば商品名の他に製造メーカーや販売開始年など販売する商品の情報をより詳細にわかりやすく紹介すること手に取らずとも商品の購入意欲を増す一因にすることができる。

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


商品登録画面に入力欄を追加する前の状態

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

カラムを追加する前のテーブル構造の状態

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



3.バージョン 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": "備考その2",
* "attr": {"placeholder": "例:備考その2"}
* })
*/
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 /{EC-CUBE を設置したフルパス}/bin/console cache:clear --no-warmup
# php /{EC-CUBE を設置したフルパス}/bin/console eccube:schema:update --force --dump-sql


一行目はキャッシュをクリアし、二行目で実際のテーブルにカラムを追加している。
PHP コマンドで実行しているが、裏ではカラムを追加する ALTER TABLE の SQL が実行されている。

カラムを追加した後のテーブル構造の状態

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

4.バージョン 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>


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


カスタマイズで追加したテキストボックスの確認

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

追加したカラムにデータが入ることの確認

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

関連記事