【非推奨】マイページ機能を利用して、閲覧ページ上からユーザー情報を変更できるようにする

Ver. 3.1 より、a-blog cms にマイページ機能が追加されたためこの機能は非推奨になりました。マイページ機能を利用したい場合は、標準機能のモジュールをご利用ください。


Shopping Cart 拡張アプリを使用することでマイページ機能を実装することができます。通常では、ユーザーの情報(基本設定・カスタム設定)を変更するためには管理画面上で編集する必要がありますが、マイページ機能を利用することで閲覧ページ上からユーザーの情報(基本設定・カスタム設定)を変更することができるようになります。


このエントリーではマイページ機能を実装して、閲覧ページ上でユーザー情報を変更できるようにする方法を解説します。

Mypage モジュール

Shopping Cart 拡張アプリをインストールすることで Mypage モジュールという GET モジュールが利用できるようになります。

Mypage モジュールでは、ユーザーの情報(基本設定・カスタム設定)の表示、更新時にエラーを検知した場合や更新に成功した場合に表示するブロックを提供しています。

ユーザーの情報(基本設定・カスタム設定)の表示

Mypage モジュールを利用することで、ユーザーの情報(基本設定・カスタム設定)の表示ができます。例えば、以下のように記述することでユーザーの名前を表示できます。

<!-- BEGIN_MODULE Mypage -->
<input id="name" type="text" name="name" autocomplete="name" class="" value="{name}" placeholder="山田太郎"data-validator="name">
<input type="hidden" name="user[]" value="name">
<input type="hidden" name="name:v#required"> <!-- 必須項目 -->
<!-- BEGIN name:v#required -->
<p class="form-error-text">名前を入力してください</p>
<!-- END name:v#required -->
<!-- END_MODULE Mypage -->

更新時にエラーを検知した場合にエラーメッセージを表示する

ユーザーの情報(基本設定・カスタム設定)の更新時に、フォームのバリデーターに引っかかった場合などでエラーが発生してユーザー情報(基本設定・カスタム設定)の更新ができないことがあります。Mypage モジュールを利用することで、更新時のエラーを検知して、エラーメッセージを表示することができます。

Mypage モジュールでは、 msg#error ブロックを記述することで、エラー時に msg#error ブロックを表示することができます。

<!-- BEGIN msg#error -->
<p class="alert-message">マイページの更新に失敗しました</p>
<!-- END msg#error -->

ユーザー情報の更新に成功した場合に、更新成功メッセージを表示する

Mypage モジュールでは、ユーザーの情報(基本設定・カスタム設定)の更新に成功した場合に msg#update ブロックを表示します。

<!-- BEGIN msg#update -->
<p class="success-message">マイページの更新に成功しました</p>
<!-- END msg#update -->

MypageUpdate モジュール

Shopping Cart 拡張アプリをインストールすることで MypageUpdate モジュールという POST モジュールが利用できるようになります。

MypageUpdate モジュールは、ユーザーの情報(基本設定・カスタム設定)の更新を行うためのモジュールになります。使い方は、他の POSTモジュールと同様に送信したいフォームの submit ボタン要素の name 属性の値に ACMS_POST_Mypage_Update を指定します。

<form action="" method="post">
  <!-- フォーム部品を読み込むためのinclude文 -->
  @include("/login/basic.html")
  <div class="form-btn-wrap">
    <button type="submit" class="btn" name="ACMS_POST_MypageUpdate">マイページ情報を更新する</button>
  </div>
</form>

また、MypageUpdate モジュールの仕様として、基本設定には更新可能な項目と不可能な項目が存在します。カスタム設定はユーザーのカスタムフィールドになるので、すべての値が更新可能です。

MypageUpdate モジュールで更新できるユーザー情報(基本設定)



ユーザー情報 フィールド 概要
名前 name ユーザーの名前です。(日本語可)
ユーザーID code ユーザーがログイン時に入力するIDです。半角英数字で設定します。
アイコン画像 icon ユーザーのアイコン画像です。
メールアドレス mail ユーザーのメールアドレスです。
メールマガジン mail_magazine この値が有効だとメールマガジンを送信できます。
メールアドレス (携帯) mail_mobile ユーザーの携帯電話のEメールアドレスです。
メールマガジン(携帯) mail_mobile_magazine この値が有効だとメールマガジンを送信できます。
URL url ユーザーがwebサイトを持っている場合のURLです。
ロケール locale ユーザーのロケールです。
パスワード pass ユーザーのパスワードです。

MypageUpdate モジュールで更新できないユーザー情報(基本設定)



ユーザー情報 フィールド 概要
ステータス status ユーザーのステータスです。
有効期限 login_expire ユーザーの有効期限です。
ログイン端末の制限 user_login_terminal_restriction この値が有効だと許可された端末からしかログイン出来なくなります。
どこでもログイン login_anywhere この値が有効だとユーザーが所属するブログ以下のどのブログでもログインできるようになります。
インデキシング indexing この値が有効だとユーザー一覧に表示されます。
子ブログへの権限 global_auth この値が有効だとユーザーに子ブログへの権限を与えます。

MypageUpdate モジュールでユーザー情報を更新する場合の注意点

MypageUpdate モジュールでユーザー情報を更新する場合、基本設定の項目はフィールドが送信されなかった場合、空として保存されてしまいます。更新が不要な項目は以下のように hidden で設定しておくことで、ユーザー情報が空で保存されてしまうことを防ぐことができます。

<form action="" method="post" class="h-adr js-validator">
  <!-- マイページ更新時に空で保存されないようにする -->
  <input type="hidden" name="code" value="{code}">
  <input type="hidden" name="user[]" value="code">

  <input type="hidden" name="url" value="{url}">
  <input type="hidden" name="user[]" value="url">

  <input type="hidden" name="locale" value="{locale}">
  <input type="hidden" name="user[]" value="locale">
  
  <!-- 更新するフィールドは省略 -->
  <button type="submit" class="btn" name="ACMS_POST_MypageUpdate">
    <!--T-->保存する<!--/T-->
  </button>
</form>

カスタムフィールドのデータの場合、こちらのドキュメントで説明されている内容を実装することで、送信されなかった項目が空になることを回避することができます。

まとめ

マイページ機能を実装することで、閲覧画面上からユーザー自身でユーザーの情報(基本設定・カスタム設定)を変更することができるようになり、ユーザーの引っ越しなどで、お届け先の住所が変更した場合でも、ユーザー側で住所を自由に変更するといったことができるようになります。ECサイトにおいては便利な機能かと思いますので、ぜひご活用ください。