• No : 2224
  • 公開日時 : 2018/02/17 14:23
  • 印刷

マイページにて会員様の名前・ポイント・会員ステージを表示させることはできますか?

サポートカテゴリー : 

回答

コマースクリエイター未利用店舗様専用の記事です

コマースクリエイターご利用店舗様は本記事ではなく、以下のマニュアルをご参照ください。

 ■オンラインマニュアル:会員情報置換文字

 

以下の画像のように、マイページに会員氏名やポイント数、会員ステージ名を表示できます。


 

設定手順

PC:構築メニュー>ページ設定>コメントパターン一覧
スマートフォン:モバイル>ページ設定>コメントパターン一覧 にて、
「パターン新規登録」をクリックし、以下の置換文字を利用したウェルカムメッセージを作成します。

コメントパターンにて置換文字を利用することで、マイページトップに会員ステージが表示できます。
 

・お客様氏名...$NAME$
・お客様の利用可能ポイント...$POINT$
・会員ステージ名...$MEMBER_STAGE_NAME$
・会員ステージ表示順...$MEMBER_STAGE_ORDER_NO$


【設定例】
いらっしゃいませ$NAME$様。いつもありがとうございます。
お客様の現在のポイント数は$POINT$ポイントです。
現在の会員ステージは、$MEMBER_STAGE_NAME$です。



コメントパターンを作成したら、

PC:構築メニュー>ページ設定>各ページ設定
スマートフォン:モバイル>ページ設定>各ページ設定 にて
「アカウントサービス」タブ内「アカウントサービストップ」
コメントパターン上部 に作成したコメントパターンを登録することで、表示することができます。

 

 

応用例:会員ステージのステージ画像を表示する



画像を表示させるには、コメントパターン内に以下を記述し、さらにCSSを記述してください。
classに会員ステージ表示順を出力し、そのclassを利用したCSSにて画像を表示する方法となります。

  <div class="stageimage_$MEMBER_STAGE_ORDER_NO$"></div>

例えば、下記のような会員ステージ設定になっている場合、


VIP会員の表示順は「1」となっているため、前述の置換文字を利用した<div>のHTML出力結果は、
 

  <div class="stageimage_1"></div>


となります。

class名に会員ステージ表示順の置換文字「$MEMBER_STAGE_ORDER_NO$」を含めることで、
会員ステージ表示順ごとにclass名が「class="stageimage_○"」のように変わります。

次に、各会員ステージのステージ画像を表示するCSSを記述します。

 

構築メニュー>デザイン設定>編集>オリジナルCSS/Javascript編集
「オリジナルCSS編集」
にて、以下のようなCSSを記述します。(画像URLは適宜差し替えてご利用ください)

.stageimage_1{
height:200px; /* 会員ステージ画像の幅 */
background:url(VIP会員画像のURL) no-repeat;
}

他ステージにもステージ別画像を表示したい場合は、
以下の記述のように同様にCSSを設定することで各ステージ別の画像を表示できます。

.stageimage_2{
height:200px; /* 会員ステージ画像の幅 */
background:url(プラチナ会員画像の画像URL) no-repeat;
}

.stageimage_3{
height:200px; /* 会員ステージ画像の幅 */
background:url(ゴールド会員画像の画像URL) no-repeat;
}