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 id="top_box__birth" class="dl_table not_required">
                    <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では会員登録時、確認画面が表示されますので、こちらも同様に削除します。

テンプレートファイルはapp/tampate/default/Entry/confirm.twigです。src/Eccube/Resource/tampate/default/Entry/confirm.twigをapp/tampate/default/Entry/confirm.twigにコピーしてから編集します。下記部分を削除すればOKです。

<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>

このようにすると、登録画面から生年月日、性別、職業の3項目を削ることができました。これらは必須項目ではないので、その他の処理は必要ありません。

Entryフォルダ内には、activate.twigとcomplete.twigがありますが、デフォルトテンプレートでは、登録完了画面で入力項目が表示されないため、これらのファイルは編集が不要でした。