メンバーシップ App

メンバーシップ Appについて

「メンバーシップ App」とは、自分のショップのメンバーシップを作成することができ、ショップのファンとのつながりをより深められる機能です。

タグ一覧

ブロック

if (条件を満たす場合に表示)

タグ	説明
`{block:MembershipPage}`	メンバーシップのガイドページであるとき(「メンバーシップ App」のインストールが必要)
`{block:NotMembershipPage}`	メンバーシップのガイドページではないとき
`{block:MembershipMyPage}`	メンバーシップのマイページであるとき(「メンバーシップ App」のインストールが必要)
`{block:NotMembershipMyPage}`	メンバーシップのマイページではないとき
`{block:MembershipLoginPage}`	メンバーシップのログインページであるとき(「メンバーシップ App」のインストールが必要)
`{block:NotMembershipLoginPage}`	メンバーシップのログインページではないとき
`{block:AppsMembership}`	「メンバーシップ App」をインストールしているとき

※ 便宜上、メンバーシップについての概要・メンバーシップ名などが記載されたメンバーシップページのことをここでは「ガイドページ」と呼んでいます。

変数

タグ	説明
`{MembershipPageURL}`	メンバーシップのガイドページのURL
`{MembershipLoginPageURL}`	メンバーシップのログインページのURL
`{MembershipMyPageURL}`	メンバーシップのマイページのURL （非ログイン状態の場合は、自動的にメンバーシップ・ログインページにリダイレクトされます）

テンプレート

タグ	説明
`{PageContents}`	メンバーシップページをふくむ、ページコンテンツを表示するための共通タグ。くわしくはこちら

ローカライズテキスト

※2023年4月現在、「英語・外貨対応 App」には対応しておりません。

``{block:AppsMembership}``
  <li>
    <a href="`{MembershipPageURL}`">メンバーシップページ（ガイドページ）のタイトル</a>
  </li>
  <li>
    <a href="`{MembershipLoginPageURL}`">ログインページのタイトル</a><!-- （任意）ログインページにかならず遷移したい場合にご利用ください -->
  </li>
  <li>
    <a href="`{MembershipMyPageURL}`">マイページ/ログインのタイトル</a>
  </li>
`{/block:AppsMembership}`

商品詳細ページ

（ポイント機能がリリースされた 2023/09/27 以降に追加された要素です）

以下の条件が満たされる場合に、{ItemAttentionTag} のなかにポイント情報が表示されます。

メンバーシップが公開状態に設定されている
ポイント設定が有効に設定されている
商品種別がポイント付与対象外の商品ではない
- この判定は {ItemAttentionTag} 内で自動的に行われ、対象外の場合 <div class="membershipPoint"> の要素は表示されません

<div class="membershipPoint">
    <p class="membershipPoint__amountWrapper"><span class="membershipPoint__amount">1000</span><span class="membershipPoint__pointName">サンプルポイント名</span>獲得</p>
    <div class="membershipPoint__attentionWrapper">
        <p class="attention membershipPoint__attention">※ <a href="/membership" class="membershipPoint__attentionLink" target="_blank">メンバーシップに登録</a>し、購入をすると獲得できます。</p>
    </div>
</div>

また、購入者がPay IDにログイン済みで、なおかつメンバーシップ会員の場合、ポイント情報下部の注意文言は非表示になります。

購入者がPay IDログイン済みで、そのアカウントがメンバーシップ会員の場合

ポイント付与対象外になる商品種別

定期便商品
抽選販売商品
デジタルコンテンツ商品
テイクアウト商品

メンバーシップページ（ガイドページ）

メンバーシップページのコンテンツ表示

{PageContents} を利用すると、自動的にログイン・ログアウト時のコンテンツが切り替わります。
ログイン・ログアウト時でレイアウトが変わりますので、必要に応じてスタイルを適応してください。くわしくはこちらを参照してください。

メンバーシップページの表示（『Pay ID』・メンバーシップログイン前）

メンバーシップページの表示（『Pay ID』ログイン済み・メンバーシップログイン前）

メンバーシップページの表示（『Pay ID』・メンバーシップログイン済み）

メンバーシップページの表示（「ポイントを利用する」設定の場合）

※ 「ポイントを利用する」設定の時に表示される要素は購入者のログイン状態に関わらず表示されます。

メンバーシップページの表示（特典を登録している場合）

メンバーシップページのメッセージ表示

メンバーシップページ上部には、退会後の完了メッセージなどが表示されます。

メンバーシップから退会した後のメンバーシップページの表示

非メンバーシップ会員の購入者が退会を行おうとしたときのメンバーシップページの表示

メンバーシップ・マイページ

{PageContents} を利用すると、メンバーシップ会員の情報が表示されます。

メンバーシップ・マイページ（「ポイントを利用する」設定の場合）

「ポイントを利用する」設定のショップの場合、マイページには登録メールアドレスの代わりに以下の情報が表示されます。

保有ポイント数
有効期限（獲得したポイントがある場合のみ）
ポイント獲得・利用履歴ページへのリンク

また、ポイント下に「有効期限について」ページへのリンクが表示されます。

メンバーシップ・マイページ（特典を登録している場合）

スマートフォンでの表示時においてはレスポンシブ対応が必要になります。

「特典の申請方法」を開くことで、特典の申請方法を確認することができます。

メンバーシップ・マイページのメッセージ表示

メンバーシップ・マイページ上部には、新規登録成功のメッセージなどが表示されます。

メンバーシップに新規登録した後のメンバーシップ・マイページの表示

メンバーシップ退会モーダル

メンバーシップに入会後に退会するさいに このメンバーシップから退会する ボタンを押すと、退会できるモーダルが出現します。
スマートフォンでの表示時においてはレスポンシブ対応が必要になります。

メンバーシップ・ポイント獲得・利用履歴ページ

ポイントを獲得もしくは利用したことがない場合は、「獲得・利用履歴がありません」と表示されます。

ポイントを獲得もしくは利用したことがある場合は、1ページあたり20件履歴が表示されます。

メンバーシップ・ログインページ

{PageContents} を利用すると、「Pay ID」・メンバーシップにログインするための導線が表示されます。

メンバーシップ非公開状態

ショップ管理画面からメンバーシップを非公開状態に変更すると、メンバーシップページ / メンバーシップ・マイページ / メンバーシップ・ログインページは以下のような非公開画面に変わります。

この状態では、過去にメンバーシップに登録した会員の退会のみ受け付け、新規登録をはじめメンバーシップページ・マイページの閲覧などはおこなえなくなります。

「ポイントを利用する」設定の場合の非公開状態

メンバーシップ自体が非公開状態でも「ポイントを利用する」設定の場合には、購入者が自身の意志で退会と保有ポイントの確認ができるように、非公開ページに 会員情報を確認する ボタンが表示されます。
購入者がこのボタンから「Pay ID」ログインをおこなった後に、以下のような非公開状態のマイページが表示されます。

メンバーシップ退会モーダル

メンバーシップ自体が非公開状態でも、過去にメンバーシップに入会した購入者が自身の意志で退会できるようにこのメンバーシップから退会するボタンを押すと退会できるモーダルが出現します。
マイページの場合と同様にスマートフォンでの表示時においてはレスポンシブ対応が必要になります。

共通フッター

「メンバーシップ App」をインストールしている場合に、購入者がいつでもアクセスできる場所に会員規約ページへのリンクを設置する必要があります。
そのため、共通フッターに適切な文言と https://thebase.com/pages/shop_membership_term へのリンクを設定してください。

また、{block:AppsMembership}を使用して「メンバーシップ App」をインストールしていない場合にはリンクが表示されない設定してください。

動作のチェック

動作確認するには下記項目を参考にしてください。