テーマ仕様書
shop
会員登録・ログイン
仮会員登録
仮会員登録画面

仮会員登録画面

「設定 > 顧客/会員 > 顧客/会員の設定 (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であてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。