基礎から応用まで ～EC-CUBEカスタマイズの全て～ STEP2.3：フロント会員登録・編集カスタマイズ 【アイピーロジック株式会社】

EC-CUBEの開発を始めたい方必見！
当社で行っているEC-CUBE研修を不定期で紹介させていただきます。

今回は「STEP2.3：フロント会員登録・編集カスタマイズ」を紹介します。

STEP2.2：会員検索カスタマイズ
https://ecnomikata.com/column/10101/

STEP2.1：会員登録・編集カスタマイズ
https://ecnomikata.com/column/9830/

STEP1.3：フロント商品詳細カスタマイズ
https://ecnomikata.com/column/9410/

STEP1.2：商品検索カスタマイズ
https://ecnomikata.com/column/8974/

STEP1.1：商品登録・編集カスタマイズ
https://ecnomikata.com/column/8959/

序章
https://ecnomikata.com/column/8635/

課題紹介

研修課題は以下になります。

【課題】
「STEP2.1：会員登録・編集カスタマイズ」で追加したinput項目をフロントの新規会員登録画面、マイページ会員登録内容変更画面（PC、携帯、スマートフォン）に追加し、登録できるようにする。

【追加項目】
text - ニックネーム
select - 住まい(アパート、マンション、戸建て)
radio - ダイレクトメール(希望する、希望しない)
check - 趣味(スポーツ、アウトドア、グルメ、読書、音楽鑑賞、車、ゲーム)

ポイント① 新規会員登録画面、マイページ会員登録内容変更画面に項目を追加(PC、スマートフォン)

PCサイト、スマートフォンサイトに項目を追加します。登録(編集)処理、Formクラスの項目追加については、STEP2.1：会員登録・編集カスタマイズで修正を行った、data/class/helper/SC_Helper_Customer.php をそのまま使用できるため、説明は割愛させていただきます。

まず、マスターデータ取得を行います。会員登録PHP (data/class/pages/entry/LC_Page_Entry.php) と、マイページ会員登録内容変更PHP (data/class/pages/mypage/LC_Page_Mypage_Change.php) の init処理に、以下のコードを追加して下さい。


次に、入力画面と確認画面に項目を追加します。PCページの新規会員登録テンプレート(data/Smarty/templates/default/entry/index.tpl) を開いて下さい。以下のような記載がされていると思います。

▼PC新規会員登録テンプレート - index.tpl


会員登録画面は様々な入力項目が存在しているにも関わらず、上記が示すとおり、index.tplには入力項目が存在していません。STEP2.2：会員検索カスタマイズにもありましたが、PCとスマートフォンサイトでは会員情報の登録画面と確認画面に共通のテンプレートを使用しています。上記13行目に以下の記述がございます。



data/Smarty/templates/default/frontparts/form_personal_input.tpl というテンプレートをインクルードすることにより、画面の共通化を行っています。それでは、以下のコードを「メールマガジン送付について」の下部に埋め込んで下さい。

▼会員登録共通テンプレート(PC) - form_personal_input.tpl


スマートフォンサイトも同様です。data/Smarty/templates/sphone/frontparts/form_personal_input.tpl に、以下のコードを埋め込んで下さい。PCサイトと同様に「メールマガジン」の下部にお願いします。

▼会員登録共通テンプレート(スマートフォン) - form_personal_input.tpl


項目追加が完了しましたら、実際に画面を表示させてみましょう。以下のように表示されていれば成功です。

▼会員登録画面(PC)


▼会員登録画面(スマートフォン)



<<注意事項>>
共通テンプレートの form_personal_input.tpl は、「新規会員登録画面」「マイページ会員登録内容変更画面」「お届け先追加・変更画面」で用いられています。特に「お届け先追加・変更画面」は項目数が少なく、FAX番号以下は表示されていません。項目の表示・非表示の制御は、インクルード時のパラメーター「flgFields」で行っています。form_personal_input.tpl 内に項目追加する場合、flgFieldsの値を確認し、適切な場所に項目を追加して下さい。


次に確認画面に項目を追加します。入力画面と同様、共通テンプレートを用いています。PCサイトの共通テンプレートは、data/Smarty/templates/default/frontparts/form_personal_confirm.tpl になります。入力画面と同様に「メールマガジンの送付について」の下部に下記のコードを追加して下さい。

▼会員登録確認共通テンプレート(PC) - form_personal_confirm.tpl


スマートフォンサイトも同じです。data/Smarty/templates/sphone/frontparts/form_personal_confirm.tpl の「メールマガジンの送付について」の下部に下記のコードを追加して下さい。

▼会員登録確認共通テンプレート(スマートフォン) - form_personal_confirm.tpl


項目追加が完了しましたら、実際に画面を表示させてみましょう。以下のように表示されていれば成功です。

▼会員登録確認画面(PC)


▼会員登録確認画面(スマートフォン)


以上で、PCサイト、スマートフォンサイトへの項目追加は完了です。なお、冒頭にも記載したとおり、登録(編集)処理、Formクラスの項目追加については、STEP2.1：会員登録・編集カスタマイズで修正を行った、data/class/helper/SC_Helper_Customer.php をそのまま使用できるため、説明は割愛させていただきます。

ポイント② 新規会員登録画面、マイページ会員登録内容変更画面に項目を追加(携帯)

携帯サイトは、共通テンプレートを用いていないため、それぞれの画面に項目を追加していきます。新規会員登録画面のテンプレートは、data/Smarty/templates/mobile/entry/index.tpl になります。下記コードを「メールマガジン」の下部に追加して下さい。

▼会員登録テンプレート(携帯) - index.tpl


項目追加が完了しましたら、実際に画面を表示させてみましょう。以下のように表示されていれば成功です。

▼会員登録画面(携帯)


マイページ会員登録内容変更画面のテンプレートは、data/Smarty/templates/mobile/mypage/change.tpl になります。会員登録画面と同様に、下記コードを「メールマガジン」の下部に追加して下さい。

▼マイページ会員登録内容変更テンプレート(携帯) - change.tpl


項目追加が完了しましたら、実際に画面を表示させてみましょう。会員登録画面と同様の表示がされていれば成功です。

次に確認画面に項目を追加します。新規会員登録確認画面のテンプレートは、data/Smarty/templates/mobile/entry/confirm.tpl になります。下記コードを「メールマガジン」の下部に追加して下さい。

▼会員登録確認テンプレート(携帯) - confirm.tpl


項目追加が完了しましたら、実際に画面を表示させてみましょう。以下のように表示されていれば成功です。

▼会員登録画面(携帯)


マイページ会員登録内容変更確認画面のテンプレートは、data/Smarty/templates/mobile/mypage/change_confirm.tpl になります。会員登録確認画面と同様に、下記コードを「メールマガジン」の下部に追加して下さい。

▼マイページ会員登録内容変更確認テンプレート(携帯) - change_confirm.tpl


項目追加が完了しましたら、実際に画面を表示させてみましょう。会員登録確認画面と同様の表示がされていれば成功です。
以上で、携帯サイトへの項目追加は完了です。

ポイント③ 戻る処理

確認画面から入力画面に戻った際に、以前に入力および選択したデータが保持されていなければなりません。そのため、確認画面テンプレートの上部にhidden項目を設定している部分があると思いますが、修正が必要になります。修正内容はPCサイト、携帯サイト、スマートフォンサイト全て同じ内容になります。

▼修正対象ファイル
data/Smarty/templates/default/entry/confirm.tpl
data/Smarty/templates/mobile/entry/confirm.tpl
data/Smarty/templates/sphone/entry/confirm.tpl
data/Smarty/templates/default/mypage/change_confirm.tpl
data/Smarty/templates/mobile/mypage/change_confirm.tpl
data/Smarty/templates/sphone/mypage/change_confirm.tpl

▼修正内容


テンプレート上部にforeachでhidden項目を設定している箇所があると思いますが、その箇所を上部のソースで上書きして下さい。チェックボックス項目は複数選択が可能なため、配列でデータを保持しています。そのままhiddenで表示すると、value値が「array」となってしまうため、配列の要素を1つずつhidden項目として設定しています。

次回

以上で「STEP2.3：フロント会員登録・編集カスタマイズ」は終了となります。
次回は「STEP3.1：受注登録・編集カスタマイズ」を紹介させていただきます。