今回は新規会員登録画面に携帯電話番号を追加する例をご紹介します。バージョンアップへの影響を考慮して、src以下の本体ソースと呼ばれる部分を一切修正しない方法で実施します。

CustomerTraitの追加

app/Customize/Entityの直下に、CustomerTrait.phpというファイルを追加します。内容は下記の通りです。

      • 携帯電話のプロパティをmobile_numberというプロパティ名で追加
      • mobile_numberのゲッターセッターの追加
      • @ORM\Columnアノテーションにより、mobile_numberプロパティとテーブルのカラムを紐付け
      • @Eccube\Annotation\FormAppendアノテーションにより、会員データ(Customerエンティティ)をソースとして使用するフォームに対して、フォーム要素の定義を行なっています。今回はあえてPhoneNumberTypeではなく用いるケースが多いTextTypeにしています。

データベースへのカラム追加

ここからはターミナル等でコマンドを実行していきます。

bin/console eccube:generate:proxies

上で作成したTraitを認識させるためにproxyファイルを生成します。成功するとapp/proxy/entity/src/Eccube/Entity/Customer.phpというファイルが自動で作成されています。
(dev環境ではなくprod環境の場合はこの直前に bin/console cache:clear –no-warmupが必要だと思いますのでご注意)

bin/console eccube:schema:update –force –dump-sql

コマンドによりdtb_customerテーブルにmobile_numberカラムを追加します。これはALTER TABLE dtb_customer ADD mobile_number VARCHAR(14) DEFAULT NULL;というSQL(MySQL)を実行するのと同じです。

テンプレートにフォームを記述

src/Eccube/Resource/template/default/Entry/index.twigを、そのままapp/template/default/Entry/index.twigとしてコピーします。
コピーしたファイルを修正し、下記のHTMLを電話番号の下に追記します。

同じようにsrc/Eccube/Resource/template/default/Entry/confirm.twigもapp/template/default/Entry/confirm.twigとしてコピーし、下記のHTMLを電話番号の下に追記します。

 

会員登録画面完成イメージ

ここまできたら新規会員登録画面を表示してみます。
下の画像のように表示されれば成功です。(prod環境の場合はキャッシュを消す必要があります)

EC-CUBE4新規会員登録に携帯電話番号追加

EC-CUBE4新規下院登録確認

マイページにも携帯番号を表示

会員登録画面と同じように、Mypage/change.twigもsrc/Eccube/Resource/template/default/からapp/template/default/へコピーし、下記のHTMLを電話番号の下に追記します。

これでマイページの情報変更画面にもフォームが表示されることが確認できます。