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

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

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

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

 

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

 

設定手順

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出力結果は、
 

となります。

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;
}