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がありますが、デフォルトテンプレートでは、登録完了画面で入力項目が表示されないため、これらのファイルは編集が不要でした。

弊社ではEC-CUBE3系、concrete5でのネットショップ構築に対応しています。仮想通貨NEM決済にも対応しています。