email_verification_banner (shared_partial)
「設定 > 顧客/会員 > 顧客/会員の設定 (opens in a new tab)」の「メールアドレス認証 (opens in a new tab)」が有効なショップで使う shared_partial です。
ログイン中の仮会員に、認証を促すバナーを表示します。
カート画面・マイページ画面で include して使用します。
表示条件
以下の3つの条件をすべて満たす場合にバナーが表示されます。
- 「設定 > 顧客/会員 > 顧客/会員の設定 (opens in a new tab)」の「メールアドレス認証 (opens in a new tab)」が有効
- 会員ログイン済み
- 顧客のステータスが仮会員
テーマ管理のファイルパス
ec_force/shop/shared/_email_verification_banner.html.liquid
ec_force/shop/shared/_email_verification_banner.html+smartphone.liquid
include の書き方
PC 版と SP 版でファイル名が異なります。banner_data_to に遷移先パスを渡します。
PC 版
{% include 'ec_force/shop/shared/email_verification_banner.html', banner_data_to: '遷移先パス' %}SP 版
{% include 'ec_force/shop/shared/email_verification_banner.html+smartphone', banner_data_to: '遷移先パス' %}banner_data_to の値
必要なコンポーネント
{% if base_info.require_email_verification? and customer_signed_in and current_customer.state == 'temporary_member' %}
<!-- メールアドレス認証バナー -->
<div id="email-verification-banner-view">
<span>メールアドレスの認証が行われていません</span>
<!-- 認証メール再送信ボタン -->
<button class="js-email-verification-banner__btn" type="button" data-to="{{ banner_data_to }}">認証メール再送信</button>
<!-- 再送信結果モーダル -->
<div class="email-verification-modal__overlay default-hide" id="email-verification-modal">
<p class="email-verification-modal__title--success">認証メール再送信完了</p>
<p class="email-verification-modal__title--error default-hide">エラーが発生しました</p>
<p class="email-verification-modal__message--success">メールアドレス認証メールを再送信しました。</p>
<p class="email-verification-modal__message--error default-hide"></p>
<!-- 閉じるボタン -->
<button class="js-email-verification-modal-close" type="button">閉じる</button>
</div>
</div>
{% endif %}