仮会員登録画面
「設定 > 顧客/会員 > 顧客/会員の設定 (opens in a new tab)」の「メールアドレス認証 (opens in a new tab)」が有効なショップで使う、仮会員登録画面です。
カート画面の未ログイン時に「会員登録して購入手続きへ進む」を選ぶと、この画面へ遷移します。
メールアドレス・パスワードおよびお名前などの基本情報を入力し、仮会員として登録します。
登録に成功すると仮会員登録完了画面へ遷移します。
仮会員に認証メールが届き、認証が完了すると本会員になります。
ショップのパス
ドメイン/shop/customers/temporary_registration
テーマ管理のファイルパス
ec_force/shop/customers/temporary_registrations/new.html.liquid
ec_force/shop/customers/temporary_registrations/new.html+smartphone.liquid
JS タグ
{{ 'shop/customers/temporary_registrations' | javascript_include_tag }}
必要なコンポーネント
※コメントアウトで任意とあるもの以外はシステム上必要なコンポーネントとなります。
{{ 'shop/customers/temporary_registrations' | javascript_include_tag }}
<!-- 新規仮会員登録コンテナ -->
<div id="customers-temporary-registrations-view">
<!-- フラッシュメッセージ -->
{{ 'notice' | flash: 'alert alert-success', 'text' }}
{{ 'alert' | flash: 'alert alert-danger', 'text' }}
{{ 'error' | flash: 'alert alert-danger', 'text' }}
<!-- エラーメッセージ -->
{% if customer.error_messages != empty %}
{% for error_message in customer.error_messages %}
<p>{{ error_message }}</p>
{% endfor %}
{% endif %}
<!-- 仮会員登録フォーム -->
<form id="new_customer" class="customers_temporary_registration_form" action="/shop/customers/temporary_registration" method="post" accept-charset="UTF-8">
<!-- メールアドレス -->
<label for="customer_email">メールアドレス</label>
<input class="validate[required,custom[email]]" type="email" placeholder="メールアドレス" value="{{ customer.email }}" name="customer[email]" id="customer_email">
<!-- パスワード -->
<label for="password">パスワード</label>
<input class="validate[required,custom[validatePasswordForCustomerByAdminSetting]]" type="password" placeholder="{{ customer_password_setting.placeholder }}" name="customer[password]" id="password">
<!-- パスワード(確認) -->
{% if shop_form_settings['password_confirmation'] %}
<label for="customer_password_confirmation">パスワード(確認)</label>
<input class="validate[required,minSize[8],equals[password]]" type="password" placeholder="{{ customer_password_setting.placeholder }}" name="customer[password_confirmation]" id="customer_password_confirmation">
{% endif %}
<!-- お名前 -->
<label for="customer_billing_address_attributes_name01">お名前</label>
{% if shop_form_settings['name_1_field'] %}
<input class="validate[required]" type="text" value="{{ customer.billing_address.full_name }}" name="customer[billing_address_attributes][name01]" id="customer_billing_address_attributes_name01">
{% else %}
<input class="validate[required]" type="text" value="{{ customer.billing_address.name01 }}" name="customer[billing_address_attributes][name01]" id="customer_billing_address_attributes_name01">
<input class="validate[required]" type="text" value="{{ customer.billing_address.name02 }}" name="customer[billing_address_attributes][name02]" id="customer_billing_address_attributes_name02">
{% endif %}
<!-- フリガナ -->
<label for="customer_billing_address_attributes_kana01">フリガナ</label>
{% if shop_form_settings['kana_1_field'] %}
<input class="validate[custom[katakana]]" type="text" value="{{ customer.billing_address.full_kana }}" name="customer[billing_address_attributes][kana01]" id="customer_billing_address_attributes_kana01">
{% else %}
<input class="validate[custom[katakana]]" type="text" value="{{ customer.billing_address.kana01 }}" name="customer[billing_address_attributes][kana01]" id="customer_billing_address_attributes_kana01">
<input class="validate[custom[katakana]]" type="text" value="{{ customer.billing_address.kana02 }}" name="customer[billing_address_attributes][kana02]" id="customer_billing_address_attributes_kana02">
{% endif %}
<!-- 性別(任意) -->
{% if shop_form_settings["sex"] %}
<label for="customer_sex_id">性別</label>
<select class="{% if shop_form_settings['sex_require'] %}validate[required]{% endif %}" name="customer[sex_id]" id="customer_sex_id">
<option value="">選択してください</option>
{% for sex in sexes %}
<option value="{{ sex.id }}" {% if customer.sex.id == sex.id %}selected{% endif %}>{{ sex.name }}</option>
{% endfor %}
</select>
{% endif %}
<!-- 生年月日(任意) -->
{% if shop_form_settings["birth"] %}
{% if shop_form_settings["birth_require"] %}
{% assign birth_year_class = 'validate[required]' %}
{% assign birth_month_class = 'validate[required]' %}
{% assign birth_day_class = 'validate[required]' %}
{% else %}
{% assign birth_year_class = 'validate[condRequired[customer_birth_2i,customer_birth_3i]]' %}
{% assign birth_month_class = 'validate[condRequired[customer_birth_1i,customer_birth_3i]]' %}
{% assign birth_day_class = 'validate[condRequired[customer_birth_1i,customer_birth_2i]]' %}
{% endif %}
<label for="customer_birth">生年月日</label>
<select id="customer_birth_1i" name="customer[birth(1i)]" class="{{ birth_year_class }}">
{% if birth_year_default_value == 0 %}
<option value="">----</option>
{% endif %}
{% assign now_year = "now" | date: "%Y" %}
{% assign past_100_years = "now" | date: "%Y" | minus: 100 %}
{% for y in (past_100_years..now_year) %}
{% if birth_year_default_value == y %}
{% if customer.birth_year == nil %}
<option value="" selected="true">----</option>
{% else %}
<option value="">----</option>
{% endif %}
{% endif %}
<option value="{{ y }}" {% if customer.birth_year == y %}selected{% endif %}>{{ y }}</option>
{% endfor %}
</select>
年
<select id="customer_birth_2i" name="customer[birth(2i)]" class="{{ birth_month_class }}">
<option value="">--</option>
{% for m in (1..12) %}
<option value="{{ m }}" {% if customer.birth_month == m %}selected{% endif %}>{{ m }}</option>
{% endfor %}
</select>
月
<select id="customer_birth_3i" name="customer[birth(3i)]" class="{{ birth_day_class }}">
<option value="">--</option>
{% for d in (1..31) %}
<option value="{{ d }}" {% if customer.birth_day == d %}selected{% endif %}>{{ d }}</option>
{% endfor %}
</select>
日
{% endif %}
<!-- 戻る/送信ボタン -->
<a href="/shop/cart">戻る</a>
<input type="submit" name="commit" value="仮会員登録する">
</form>
</div>画面イメージ
※こちらは、上記で紹介しているコンポーネントのコードにデフォルトデザインをCSSであてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。
