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

カテゴリー
関連するブログ記事
ホームページのページを評価する機能を追加しました。concrete5 では、様々なアドオンが公開されています。今回追加したページを評価する機能も、その一つです。
漢字を間違えてしまう(例: 幹事を間違えてしまう)、文字を抜かしてしまう(例: 文字を抜かししまう)、といったミスを、原稿を書いているときにしたことはありませんか?そういった文だと、読みにくくなりますね。読む人からすると、こういったミスが多いと、読みにくく感じることが多いです。 弊社では、​ホームページ上で校正チェックするようにしました。こうすることで、漢字変換ミスなどの単純なミスを事前にチェックしやすくなりました。もちろん必ずゼロにできる、というものではないですが、効率よく確認できます。
初版では多くの方にご購入いただきました。当方の想定としては、ウェブデザイナーが読む、でしたが、ブロガー・アフィリエイターの方にも読んでいただけたようで、大変嬉しく思います。一方で、想定読者ではない方にとっては期待外れに思われた方もいるようで、申し訳なく思います。そこで、今回は、買うべきではない人、について書きたいと思います。
オリジナルデザインを持ちたい人や、既にオリジナルデザインのウェブサイトを持っている人で、お知らせやブログは自分で更新したい、という方にお勧めなのがPulse CMSです。今回は、Pulse CMSだけでしたが、ペライチやWordPressと比較してみると面白いかもしれません。
ペライチ+広告にすると、「ページを作る、広告出す、結果を見る、ページを変更する」といったサイクルが回しやすいですから、売上を伸ばしたい人にはかなり向いているように思います。
記事公開日: 2017年02月12日