お届け先住所(部分テンプレート)
注文情報入力画面で利用するお届先住所入力フォーム用部分テンプレートです。
注文情報入力画面で 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>