テーマ仕様書
shop
購入画面
請求先住所★

請求先住所(部分テンプレート)

注文情報入力画面で利用する請求先住所入力フォーム用部分テンプレートです。
注文情報入力画面で include して利用します。(注文情報入力画面以外では利用できません)

テーマ管理のファイルパス

ec_force/shop/orders/_view_billing_information.html.liquid
ec_force/shop/orders/_view_billing_information.html+smartphone.liquid

必要なコンポーネント

任意とあるもの以外はシステム上必要なコンポーネントとなりますので、必ず使用するようにしてください。

<!-- 部分テンプレート(お客様情報の入力) -->
<div id='view-billing-information'>
  <!-- 注記 -->
  {% if guest_flag and customer_signed_in != true %}
    ※招待コードをご利用の方は<a href="/shop/customers/sign_in?customer_return_to=%2Fshop%2Forder%2Fnew">こちら</a>から会員登録してください。
  {% endif %}
 
  <!-- お名前 -->
  <div class='hide-on-amazon-pay'>
    <label>お名前</label>
    {% if shop_form_settings['name_1_field'] %}
      <input type="text" class='validate[required]' id='order_billing_address_attributes_name01' name='order[billing_address_attributes][name01]' autocomplete="name" value="{% if order.billing_address %}{{ order.billing_address.full_name }}{% else %}{{ order.customer.billing_address.full_name }}{% endif %}">
    {% else %}
      <span>姓</span>
      <input type="text" class='validate[required]' id='order_billing_address_attributes_name01' name='order[billing_address_attributes][name01]' autocomplete="family-name" value="{% if order.billing_address %}{{ order.billing_address.name01 }}{% else %}{{ order.customer.billing_address.name01 }}{% endif %}">
      <span>名</span>
      <input type="text" class='validate[required]' id='order_billing_address_attributes_name02' name='order[billing_address_attributes][name02]' autocomplete="given-name" value="{% if order.billing_address %}{{ order.billing_address.name02 }}{% else %}{{ order.customer.billing_address.name02 }}{% endif %}">
    {% endif %}
  </div>
 
  <!-- フリガナ -->
  <div class='hide-on-amazon-pay'>
    <label>フリガナ</label>
    {% if shop_form_settings['kana_1_field'] %}
      <input type="text" class='validate[required,custom[katakana]]' id='order_billing_address_attributes_kana01' name='order[billing_address_attributes][kana01]' value='{% if order.billing_address %}{{ order.billing_address.full_kana }}{% else %}{{ order.customer.billing_address.full_kana }}{% endif %}'>
    {% else %}
      <span>セイ</span>
      <input type="text" class='validate[required,custom[katakana]]' id='order_billing_address_attributes_kana01' name='order[billing_address_attributes][kana01]' value='{% if order.billing_address %}{{ order.billing_address.kana01 }}{% else %}{{ order.customer.billing_address.kana01 }}{% endif %}'>
      <span>メイ</span>
      <input type="text" class='validate[required,custom[katakana]]' id='order_billing_address_attributes_kana02' name='order[billing_address_attributes][kana02]' value='{% if order.billing_address %}{{ order.billing_address.kana02 }}{% else %}{{ order.customer.billing_address.kana02 }}{% endif %}'>
    {% endif %}
  </div>
 
  <!-- 郵便番号 -->
  <div class='hide-on-amazon-pay'>
    <label>郵便番号</label>
    {% if shop_form_settings['zip_1_field'] %}
      <span>〒</span>
      <input type="tel" class='validate[required,custom[integer],minSize[7]]' autocomplete="postal-code" id='order_billing_address_attributes_zip01' maxlength='7' name='order[billing_address_attributes][zip01]' value='{% if order.billing_address %}{{ order.billing_address.full_zip }}{% else %}{{ order.customer.billing_address.full_zip }}{% endif %}'>
    {% else %}
      <span>〒</span>
      <input type="tel" class='validate[required,custom[integer],minSize[3]]' autocomplete="postal-code" id='order_billing_address_attributes_zip01' maxlength='3' name='order[billing_address_attributes][zip01]' value='{% if order.billing_address %}{{ order.billing_address.zip01 }}{% else %}{{ order.customer.billing_address.zip01 }}{% endif %}'>
      <span>−</span>
      <input type="tel" class='validate[required,custom[integer],minSize[4]]' autocomplete="none" id='order_billing_address_attributes_zip02' maxlength='4' name='order[billing_address_attributes][zip02]' value='{% if order.billing_address %}{{ order.billing_address.zip02 }}{% else %}{{ order.customer.billing_address.zip02 }}{% endif %}'>
    {% endif %}
  </div>
 
  <!-- 都道府県 -->
  <div class='hide-on-amazon-pay'>
    <label>都道府県</label>
    <select class='validate[required]' id='order_billing_address_attributes_prefecture_name' name='order[billing_address_attributes][prefecture_id]'>
      <option value="">選択してください</option>
      {% for prefecture in prefectures %}
        {% if order.billing_address %}
          <option value='{{ prefecture.id }}' {% if prefecture.id == order.billing_address.prefecture_id %}selected{% endif %}>{{ prefecture.name }}</option>
        {% elsif order.customer.billing_address %}
          <option value='{{ prefecture.id }}' {% if prefecture.id == order.customer.billing_address.prefecture_id %}selected{% endif %}>{{ prefecture.name }}</option>
        {% else %}
          <option value='{{ prefecture.id }}'>{{ prefecture.name }}</option>
        {% endif %}
      {% endfor %}
    </select>
  </div>
 
  <!-- 住所1 -->
  <div class='hide-on-amazon-pay'>
    <label>{{ shop_form_settings['addr01_label'] }}</label>
    <input type="text" class='validate[required]' id='order_billing_address_attributes_addr01' name='order[billing_address_attributes][addr01]' value='{% if order.billing_address %}{{ order.billing_address.addr01 }}{% else %}{{ order.customer.billing_address.addr01 }}{% endif %}' placeholder="{{ shop_form_settings['addr01_placeholder'] }}">
  </div>
 
  <!-- 住所2 -->
  <div class='hide-on-amazon-pay'>
    <label>{{ shop_form_settings['addr02_label'] }}</label>
    {% if shop_form_settings['addr03'] %}
      <input type="text" class='{% if shop_form_settings["addr02_require"] %}validate[required]{% endif %}' id='order_billing_address_attributes_addr02' name='order[billing_address_attributes][addr02]' value='{% if order.billing_address %}{{ order.billing_address.addr02 }}{% elsif order.customer.billing_address %}{{ order.customer.billing_address.addr02 }}{% endif %}' placeholder="{{ shop_form_settings['addr02_placeholder'] }}">
    {% else %}
      <input type="text" class='{% if shop_form_settings["addr02_require"] %}validate[required]{% endif %}' id='order_billing_address_attributes_addr02' name='order[billing_address_attributes][addr02]' placeholder="{{ shop_form_settings['addr02_placeholder'] }}"
      value='{% if order.billing_address %}{{ order.billing_address.addr02 }}{{ order.billing_address.addr03 }}{% elsif order.customer.billing_address %}{{ order.customer.billing_address.addr02 }}{{ order.customer.billing_address.addr03 }}{% endif %}'>
    {% endif %}
  </div>
 
  <!-- 住所3 -->
  {% if shop_form_settings['addr03'] %}
    <div class='hide-on-amazon-pay'>
      <label>{{ shop_form_settings['addr03_label'] }}</label>
      <input type="text" id='order_billing_address_attributes_addr03' name='order[billing_address_attributes][addr03]' value='{% if order.billing_address %}{{ order.billing_address.addr03 }}{% else %}{{ order.customer.billing_address.addr03 }}{% endif %}' placeholder="{{ shop_form_settings['addr03_placeholder'] }}">
    </div>
  {% endif %}
 
  <!-- 電話番号 -->
  <div class='hide-on-amazon-pay'>
    <label>電話番号</label>
    {% if shop_form_settings['tel_1_field'] %}
      <input type="tel" class='validate[required,custom[integer]]' maxlength='12' name='order[billing_address_attributes][tel01]' autocomplete="tel" value='{% if order.billing_address %}{{ order.billing_address.full_tel }}{% else %}{{ order.customer.billing_address.full_tel }}{% endif %}'>
    {% else %}
      <input type="tel" class='validate[required,custom[integer]]' maxlength='5' name='order[billing_address_attributes][tel01]' autocomplete="none" value='{% if order.billing_address %}{{ order.billing_address.tel01 }}{% else %}{{ order.customer.billing_address.tel01 }}{% endif %}'>
      <span>-</span>
      <input type="tel" class='validate[required,custom[integer]]' maxlength='4' name='order[billing_address_attributes][tel02]' autocomplete="none" value='{% if order.billing_address %}{{ order.billing_address.tel02 }}{% else %}{{ order.customer.billing_address.tel02 }}{% endif %}'>
      <span>-</span>
      <input type="tel" class='validate[required,custom[integer]]' maxlength='4' name='order[billing_address_attributes][tel03]' autocomplete="none" value='{% if order.billing_address %}{{ order.billing_address.tel03 }}{% else %}{{ order.customer.billing_address.tel03 }}{% endif %}'>
    {% endif %}
    {% unless shop_form_settings['email'] %}
      <span>※ご注文・発送に関するご連絡用にSMS受信可能な携帯電話番号をご入力ください。</span>
    {% endunless %}
  </div>
 
  <!-- FAX番号 -->
  {% if shop_form_settings['fax'] %}
    <div class='hide-on-amazon-pay'>
      <label>FAX番号</label>
      {% if shop_form_settings['fax_1_field'] %}
        <input type="tel" maxlength='12' name='order[billing_address_attributes][fax01]' value='{% if order.billing_address %}{{ order.billing_address.full_fax }}{% else %}{{ order.customer.billing_address.full_fax }}{% endif %}'>
      {% else %}
        <input type="tel" maxlength='5' name='order[billing_address_attributes][fax01]' value='{% if order.billing_address %}{{ order.billing_address.fax01 }}{% else %}{{ order.customer.billing_address.fax01 }}{% endif %}'>
        <span>-</span>
        <input type="tel" maxlength='4' name='order[billing_address_attributes][fax02]' value='{% if order.billing_address %}{{ order.billing_address.fax02 }}{% else %}{{ order.customer.billing_address.fax02 }}{% endif %}'>
        <span>-</span>
        <input type="tel" maxlength='4' name='order[billing_address_attributes][fax03]' value='{% if order.billing_address %}{{ order.billing_address.fax03 }}{% else %}{{ order.customer.billing_address.fax03 }}{% endif %}'>
      {% endif %}
    </div>
  {% endif %}
 
  <!-- 会社名 -->
  {% if shop_form_settings['company'] %}
    <div class='hide-on-amazon-pay'>
      <label>会社名</label>
      <input type="text" name='order[billing_address_attributes][company_name]' autocomplete="organization" value='{% if order.billing_address %}{{ order.billing_address.company_name }}{% else %}{{ order.customer.billing_address.company_name }}{% endif %}'>
    </div>
  {% endif %}
 
  <!-- メールアドレス -->
  {% if shop_form_settings['email'] %}
    <label>メールアドレス</label>
    {% if customer_signed_in %}
      <input disabled id='email' type='email' value='{{ current_customer.email }}' class='for_password_validate'>
      <input name='order[email]' type='hidden' value='{{ current_customer.email }}'>
      <input name='order[customer_attributes][email]' type='hidden' value='{{ current_customer.email }}'>
    {% else %}
      <input type="email" name='order[email]' autocomplete="email" id='email' class='js-email-autocomplete validate[required,custom[email],ajax[emailCheck]] for_password_validate' value="{% if order.email %}{{ order.email }}{% elsif line_email %}{{ line_email }}{% endif %}">
      <input name='order[customer_attributes][email]' type='hidden' value='{{ order.email }}' id='customer_email'>
    {% endif %}
 
    <!-- メールアドレス(確認) -->
    <label>メールアドレス(確認)</label>
    {% if customer_signed_in %}
      <input disabled name='order[email_confirmation]' type='email' value='{{ current_customer.email }}'>
    {% else %}
      <input class='js-email-autocomplete validate[required,custom[email],equals[email]],ajax[emailCheck]]' name='order[email_confirmation]' type='email' value="{% if order.email %}{{ order.email }}{% elsif line_email %}{{ line_email }}{% endif %}">
    {% endif %}
  {% endif %}
 
  <!-- 性別 -->
  {% if shop_form_settings["sex"] %}
    <label>性別</label>
    <select class="{% if shop_form_settings['sex_require'] %}validate[required]{% endif %}" name='order[customer_attributes][sex_id]'>
      <option value=''>選択してください</option>
      {% for sex in sexes %}
        <option value='{{ sex.id }}' {% if order.customer.sex.id == sex.id %}selected{% endif %}>{{ sex.name }}</option>
      {% endfor %}
    </select>
  {% endif %}
 
  <!-- 職業 -->
  {% if shop_form_settings["job"] %}
    <label>職業</label>
    <select class='{% if shop_form_settings["job_require"] %}validate[required]{% endif %}' name='order[customer_attributes][job_id]'>
      <option value=''>選択してください</option>
      {% for j in jobs %}
        <option value="{{ j.id }}" {% if order.customer.job.id == j.id %}selected{% endif %}>{{ j.name }}</option>
      {% endfor %}
    </select>
  {% endif %}
 
  <!-- 生年月日 -->
  {% if shop_form_settings["birth"] or order.age_check_required? %}
    <label>生年月日</label>
    <select class='{% if order.age_check_required? %}validate[required,custom[ageCheck]]{% elsif shop_form_settings["birth_require"] %}validate[required]{% else %}validate[condRequired[order_customer_attributes_birth_2i,order_customer_attributes_birth_3i]]{% endif %}' id='order_customer_attributes_birth_1i' name='order[customer_attributes][birth(1i)]' autocomplete="bday-year">
      {% 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 order.customer.birth_year == nil %}
            <option value="" selected="true">----</option>
          {% else %}
            <option value="">----</option>
          {% endif %}
        {% endif %}
        <option value="{{ y }}" {% if order.customer.birth_year == y %}selected{% endif %}>{{ y }}</option>
      {% endfor %}
    </select>
    <select class='{% if order.age_check_required? %}validate[required,custom[ageCheck]]{% elsif shop_form_settings["birth_require"] %}validate[required]{% else %}validate[condRequired[order_customer_attributes_birth_1i,order_customer_attributes_birth_3i]]{% endif %}' id='order_customer_attributes_birth_2i' name='order[customer_attributes][birth(2i)]' autocomplete="bday-month">
      <option value=''>--</option>
      {% for m in (1..12) %}
        <option value="{{ m }}" {% if order.customer.birth_month == m %}selected{% endif %}>{{ m }} 月</option>
      {% endfor %}
    </select>
    <select class='{% if order.age_check_required? %}validate[required,custom[ageCheck]]{% elsif shop_form_settings["birth_require"] %}validate[required]{% else %}validate[condRequired[order_customer_attributes_birth_1i,order_customer_attributes_birth_2i]]{% endif %}' id='order_customer_attributes_birth_3i' name='order[customer_attributes][birth(3i)]' autocomplete="bday-day">
      <option value=''>--</option>
      {% for d in (1..31) %}
        <option value="{{ d }}" {% if order.customer.birth_day == d %}selected{% endif %}>{{ d }} 日</option>
      {% endfor %}
    </select>
  {% endif %}
 
  <!-- 同時に会員登録と購入を行う際のパスワード -->
  {% if guest_flag and customer_signed_in != true %}
    {% unless auth_infra and auth_infra.login_only_auth_infra == true %}
      <!-- パスワード -->
      <label>パスワード</label>
      <input class="validate[required,custom[validatePasswordForCustomerByAdminSetting]]" placeholder="半角英数字8文字以上" type="password" name="order[customer_attributes][password]" value="" id="order_customer_attributes_password">
      <!-- パスワード(確認) -->
      {% if shop_form_settings["password_confirmation"] %}
        <label for="customer_password_confirmation">パスワード(確認)</label>
        <input class="validate[required,minSize[8],equals[order_customer_attributes_password]]" placeholder="半角英数字8文字以上" type="password" name="order[customer_attributes][password_confirmation]" id="order_customer_attributes_password_confirmation" />
      {% endif %}
    {% endunless %}
  {% endif %}
 
</div>