マイページにて会員様の名前・ポイント・会員ステージを表示させることはできますか？
- 更新日： 2024-10-22 01:51:58 UTC
設定方法はコマースクリエイターの利用状況により異なります。
コマースクリエイター利用中店舗様
コマースクリエイター有効化中・コマースクリエイター未利用店舗様
コマースクリエイター利用中店舗様
設定方法
フリーパーツに会員情報置換文字を記載していただくことで表示可能です。
詳細は以下のマニュアルをご確認ください。
■オンラインマニュアル：会員情報置換文字
スタートアップテーマをご利用の場合
マイページのレイアウトに初期状態で配置されているフリーパーツ「会員情報表示」をご活用ください。
会員様のお名前、保有ポイント数、有効期限は表示されるようにあらかじめ設定されています。
なお、会員ステージ名を表示したい場合は、以下の記述をご変更ください。
コメントアウトされているので、<!-- -->を削除していただくことで表示されます。
<!-- <div class="fs-p-accountInfo__accountRank">
<span class="fs-p-accountInfo__accountRank__rank">{@ member.stage_name @}</span>
<span class="fs-p-accountInfo__accountRank__rankLabel">会員</span>
</div> -->
↓
<div class="fs-p-accountInfo__accountRank">
<span class="fs-p-accountInfo__accountRank__rank">{@ member.stage_name @}</span>
<span class="fs-p-accountInfo__accountRank__rankLabel">会員</span>
</div>
コマースクリエイター有効化中・コマースクリエイター未利用店舗様
以下の画像のように、マイページに会員氏名やポイント数、会員ステージ名を表示できます。
設定手順
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;
}