テーマ仕様書
shop
購入画面
お届け先住所★

お届け先住所(部分テンプレート)

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

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

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

必要なコンポーネント

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

<!-- 部分テンプレート(お届け先住所の入力) -->
 
<!-- 店頭受取の可否 -->
{% assign pickup_store = false %}
{% if pickup_store_is_available == true and delivery_to_address_is_checked == false %}
  {% assign pickup_store = true %}
{% endif %}
 
<!-- 複数のお届け先の可否 -->
{% assign multiple_shipping = false %}
{% if multiple_shipping_is_available == true and order_is_multiple_shipping  == true%}
  {% assign multiple_shipping = true %}
{% endif %}
 
{% if pickup_store or multiple_shipping %}
  {% assign own_style = 'display: none;' %}
{% else %}
  {% assign own_style = '' %}
{% endif %}
 
<div id="view-shipping-information" style="{{ own_style }}">
 
  <!-- お届け先情報の選択 -->
  <div class="hide-on-amazon-pay">
    <label>お届け先住所</label>
    <select id="shipping_address_id" name="order[shipping_address_id]">
      <option value='same' {% if selected_shipping_address_value == 'same' %}selected{% endif %}>上記住所と同じ</option>
      {% if customer_signed_in %}
        {% for shipping_address in current_customer.shipping_addresses %}
          <option value='{{ shipping_address.id }}' {% if selected_shipping_address_value == shipping_address.id %}selected{% endif %}>{{ shipping_address.full_name }} | 〒{{ shipping_address.full_zip }} {{ shipping_address.full_address }}</option>
        {% endfor %}
      {% endif %}
      <option value='new' {% if selected_shipping_address_value == 'new' %}selected{% endif %}>新しく入力する</option>
    </select>
  </div>
 
  <!-- AmazonPay -->
  <div id="view-amazon-pay-address-book-widget" style="display:none;">
    <div id="addressBookWidgetDiv"></div>
  </div>
 
  <!-- お届け先情報の入力フォーム -->
  <div id="shipping_address_input" style="display:none;">
 
    <div class="hide-on-amazon-pay">
 
      <!-- お名前 -->
      <label>お名前</label>
      {% if shop_form_settings['name_1_field'] %}
        <input type="text" class="validate[required]" id="order_shipping_address_attributes_name01" name="order[shipping_address_attributes][name01]" autocomplete="name" value="{% if order.shipping_address %}{{ order.shipping_address.full_name }}{% else %}{{ order.customer.shipping_address.full_name }}{% endif %}">
      {% else %}
        <span>姓</span>
        <input type="text" class="validate[required]" id="order_shipping_address_attributes_name01" name="order[shipping_address_attributes][name01]" autocomplete="family-name" value="{% if order.shipping_address %}{{ order.shipping_address.name01 }}{% else %}{{ order.customer.shipping_address.name01 }}{% endif %}">
        <span>名</span>
        <input type="text" class="validate[required]" id="order_shipping_address_attributes_name02" name="order[shipping_address_attributes][name02]" autocomplete="given-name" value="{% if order.shipping_address %}{{ order.shipping_address.name02 }}{% else %}{{ order.customer.shipping_address.name02 }}{% endif %}">
      {% endif %}
 
      <!-- フリガナ -->
      <label>フリガナ</label>
      {% if shop_form_settings['kana_1_field'] %}
        <input type="text" class="validate[required,custom[katakana]]" id="order_shipping_address_attributes_kana01" name="order[shipping_address_attributes][kana01]" value="{% if order.shipping_address %}{{ order.shipping_address.full_kana }}{% else %}{{ order.customer.shipping_address.full_kana }}{% endif %}">
      {% else %}
        <span>セイ</span>
        <input type="text" class="validate[required,custom[katakana]]" id="order_shipping_address_attributes_kana01" name="order[shipping_address_attributes][kana01]" value="{% if order.shipping_address %}{{ order.shipping_address.kana01 }}{% else %}{{ order.customer.shipping_address.kana01 }}{% endif %}">
        <span>メイ</span>
        <input type="text" class="validate[required,custom[katakana]]" id="order_shipping_address_attributes_kana02" name="order[shipping_address_attributes][kana02]" value="{% if order.shipping_address %}{{ order.shipping_address.kana02 }}{% else %}{{ order.customer.shipping_address.kana02 }}{% endif %}">
      {% endif %}
 
      <!-- 郵便番号 -->
      <label>郵便番号</label>
      {% if shop_form_settings['zip_1_field'] %}
        <span>〒</span>
        <input type="tel" class="validate[required,custom[integer],minSize[7]]" id="order_shipping_address_attributes_zip01" maxlength="7" name="order[shipping_address_attributes][zip01]" autocomplete="postal-code" value="{% if order.shipping_address %}{{ order.shipping_address.full_zip }}{% else %}{{ order.customer.shipping_address.full_zip }}{% endif %}">
      {% else %}
        <span>〒</span>
        <input type="tel" class="validate[required,custom[integer],minSize[3]]" id="order_shipping_address_attributes_zip01" maxlength="3" name="order[shipping_address_attributes][zip01]" autocomplete="postal-code" value="{% if order.shipping_address %}{{ order.shipping_address.zip01 }}{% else %}{{ order.customer.shipping_address.zip01 }}{% endif %}">
        <span>−</span>
        <input type="tel" class="validate[required,custom[integer],minSize[4]]" id="order_shipping_address_attributes_zip02" maxlength="4" name="order[shipping_address_attributes][zip02]" autocomplete="none" value="{% if order.shipping_address %}{{ order.shipping_address.zip02 }}{% else %}{{ order.customer.shipping_address.zip01 }}{% endif %}">
      {% endif %}
 
      <!-- 都道府県 -->
      <label>都道府県</label>
      <select class="validate[required]" id="order_shipping_address_attributes_prefecture_name" name="order[shipping_address_attributes][prefecture_id]">
        <option value="">選択してください</option>
        {% for prefecture in prefectures %}
          {% if order.shipping_address %}
            <option value='{{ prefecture.id }}' {% if prefecture.id == order.shipping_address.prefecture_id %}selected{% endif %}>{{ prefecture.name }}</option>
          {% elsif order.customer.shipping_address %}
            <option value='{{ prefecture.id }}' {% if prefecture.id == order.customer.shipping_address.prefecture_id %}selected{% endif %}>{{ prefecture.name }}</option>
          {% else %}
            <option value='{{ prefecture.id }}'>{{ prefecture.name }}</option>
          {% endif %}
        {% endfor %}
      </select>
 
      <!-- 住所1 -->
      <label>{{ shop_form_settings['addr01_label'] }}</label>
      <input type="text" class="validate[required]" id="order_shipping_address_attributes_addr01" name="order[shipping_address_attributes][addr01]" value="{% if order.shipping_address %}{{ order.shipping_address.addr01 }}{% else %}{{ order.customer.shipping_address.addr01 }}{% endif %}" placeholder="{{ shop_form_settings['addr01_placeholder'] }}">
 
      <!-- 住所2 -->
      <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_shipping_address_attributes_addr02" name="order[shipping_address_attributes][addr02]" value="{% if order.shipping_address %}{{ order.shipping_address.addr02 }}{% elsif order.customer.shipping_address %}{{ order.customer.shipping_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_shipping_address_attributes_addr02" name="order[shipping_address_attributes][addr02]"
        value="{% if order.shipping_address %}{{ order.shipping_address.addr02 }}{{ order.shipping_address.addr03 }}{% elsif order.customer.shipping_address %}{{ order.customer.shipping_address.addr02 }}{{ order.customer.shipping_address.addr03 }}{% endif %}" placeholder="{{ shop_form_settings['addr02_placeholder'] | append: shop_form_settings['addr03_placeholder'] }}">
      {% endif %}
 
      <!-- 住所3 -->
      {% if shop_form_settings['addr03'] %}
        <label>{{ shop_form_settings['addr03_label'] }}</label>
        <input type="text" id="order_shipping_address_attributes_addr03" name="order[shipping_address_attributes][addr03]" value="{% if order.shipping_address %}{{ order.shipping_address.addr03 }}{% else %}{{ order.customer.shipping_address.addr03 }}{% endif %}" placeholder="{{ shop_form_settings['addr03_placeholder'] }}">
      {% endif %}
 
      <!-- 電話番号 -->
      <label>電話番号</label>
      {% if shop_form_settings['tel_1_field'] %}
        <input type="tel" class="validate[required,custom[integer]]" maxlength="12" name="order[shipping_address_attributes][tel01]" autocomplete="tel" value="{{ order.shipping_address.full_tel }}">
      {% else %}
        <input type="tel" class="validate[required,custom[integer]]" maxlength="5" name="order[shipping_address_attributes][tel01]" autocomplete="none" value="{{ order.shipping_address.tel01 }}">
        <span>-</span>
        <input type="tel" class="validate[required,custom[integer]]" maxlength="4" name="order[shipping_address_attributes][tel02]" autocomplete="none" value="{{ order.shipping_address.tel02 }}">
        <span>-</span>
        <input type="tel" class="validate[required,custom[integer]]" maxlength="4" name="order[shipping_address_attributes][tel03]" autocomplete="none" value="{{ order.shipping_address.tel03 }}">
      {% endif %}
 
    </div>
  </div>
</div>