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

カテゴリー
関連するブログ記事
講師は川端康浩さんと丸山敏昭さんでした。 単に助成金を取りましょう、で終わらずに、助成金をどう活用してビジネスを拡大させていくか、という話もあり、凄く興味深かったです。
フォームによってサーバー側の処理は異なりますが、HTMLの表示に関して言えば、かなり似ています。もちろんスタイルやレイアウトは異なるのですが、「htmlで枠が作られていて、データを入力する」という部分はほとんど一緒です。ここに着目すると、どんなフォームでもmautic連携できるのではないか、と考えました。
​IT導入補助金の対象に、弊社の提供する「マイ見積」が採択されました。弊社では、中小企業の事業者様向けに、申請代行を行います。
レスキューワーク株式会社では、新春お年玉企画として、「concrete5 アドオンのレビューをブログ等に公開した方全員に、アドオンを一個プレゼント」を行います。複数個レビューされた場合は、レビュー一個につき、アドオンを一個プレゼントします。
動画を流しているブースだと、歩く足を止めて、見てみようか、という気持ちになりやすかったです。展示品がたくさん並んでいるブースは、展示されている品に詳しい人には良いかもしれません。しかし、詳しくない人に興味を持ってもらうには、動画が良いと思いました。もちろん、機械の展示でも良いのですが、動画であれば、展示会以外でも、youtubeにアップして、自社ホームページに埋め込む、など、いろんなところで使えます。
記事公開日: 2017年02月12日