EC-CUBE3系の会員登録画面のカスタマイズ(フロントエンド側)
ネットショップ構築ツールEC-CUBEのバージョン3系でのカスタマイズです。EC-CUBE3系では、テンプレートはtwig形式です。(EC-CUBE2系はsmartyでした。)
今回は、フロントエンドのテンプレートをカスタマイズしてみます。データベース部分の変更は今回は取り扱いません。
フォルダ構成
まずは、テンプレートのフォルダがどこにあるかを確認してみましょう。src/Eccube/Resource/tampate/default/に、初期テンプレートが設置されています。
defaultフォルダ内もさらに細分化されています。登録画面はEntryフォルダ内にあります。EC-CUBEだと、会員登録ページのデフォルトURLはentryになっています。だいたいURLとフォルダ名が同じになっています。
テンプレートを改変するときの注意
テンプレートをカスタマイズするとき、一番てっとり早い方法は、src/Eccube/Resource/tampate/defaultの中のファイルを直接編集することです。しかし、こうした場合、元のテンプレートファイルがバージョンアップした場合に、自分のカスタマイズが上書きされてしまう可能性があります。なので、app/template/フォルダに、ファイルをコピーしてから、カスタマイズしていきます。
公式ドキュメントのデザインテンプレートの基礎にあるように、EC-CUBEではテンプレートの読み込み順が設定されています。所定の位置にファイルを置くと、そちらが優先して読み込まれます。イメージとしては、WordPressの子テーマみたいな感じです。
今回は、src/Eccube/Resource/tampate/default/Entry/index.twigの変更です。app/tampate/default/Entry/index.twigに置くと、app/tampate/default/Entry/index.twigが優先して読み込まれます。
今回は、生年月日、性別、職業の3項目が不要なので、消すことにしました。app/tampate/default/Entry/index.twigで下記の部分を削除しました。
<div class="dl_table not_required" id="top_box__birth"> <dl> <dt>{{ form_label(form.birth) }}</dt> <dd> <div class="form-group form-inline">{{ form_widget(form.birth) }} {{ form_errors(form.birth) }}</div> </dd> </dl> <dl> <dt id="top_box__sex">{{ form_label(form.sex) }}</dt> <dd> <div class="form-group form-inline">{{ form_widget(form.sex) }} {{ form_errors(form.sex) }}</div> </dd> </dl> <dl id="top_box__job"> <dt>{{ form_label(form.job) }}</dt> <dd> <div class="form-group form-inline">{{ form_widget(form.job) }} {{ form_errors(form.job) }}</div> </dd> </dl> </div>
EC-CUBEでは会員登録時、確認画面が表示されますので、こちらも同様に削除します。
<div class="dl_table not_required">
<dl id="confirm_box__birth">
<dt>{{ form_label(form.birth) }}</dt>
<dd>
<div class="form-group form-inline">{{ form_widget(form.birth) }}</div>
</dd>
</dl>
<dl id="confirm_box__sex">
<dt>{{ form_label(form.sex) }}</dt>
<dd>
<div class="form-group form-inline">{{ form_widget(form.sex) }}</div>
</dd>
</dl>
<dl id="confirm_box__job">
<dt>{{ form_label(form.job) }}</dt>
<dd>
<div class="form-group form-inline">{{ form_widget(form.job) }}</div>
</dd>
</dl>
</div>
テンプレートファイルはapp/tampate/default/Entry/confirm.twigです。src/Eccube/Resource/tampate/default/Entry/confirm.twigをapp/tampate/default/Entry/confirm.twigにコピーしてから編集します。下記部分を削除すればOKです。
このようにすると、登録画面から生年月日、性別、職業の3項目を削ることができました。これらは必須項目ではないので、その他の処理は必要ありません。
Entryフォルダ内には、activate.twigとcomplete.twigがありますが、デフォルトテンプレートでは、登録完了画面で入力項目が表示されないため、これらのファイルは編集が不要でした。
弊社ではB2C向けはEC-CUBE、B2B向けは自動見積書発行ホームページ、を使うことが多いです。
EC-CUBE 3 店舗運営&デザインカスタマイズガイド
