テーマ仕様書
shop
マイページ
お届け先住所
入力フォーム★

お届け先情報フォーム(部分テンプレート)

マイページ お届け先情報の編集画面・登録画面で利用する部分テンプレートです。
お届け先情報の編集画面・登録画面で include して利用しますが、他の画面では利用できません。

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

ec_force/shop/customer/shipping_addresses/_form.html.liquid
ec_force/shop/customer/shipping_addresses/_form.html+smartphone.liquid

必要なコンポーネント

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

{{ 'notice' | flash: 'alert alert-success', 'text' }}
{{ 'alert' | flash: 'alert alert-danger', 'text' }}
{{ 'error' | flash: 'alert alert-danger', 'text' }}
 
<!-- 会員情報コピーボタン -->
<label for="copy-customer-billing-address">会員情報をコピー</label>
<a id='copy-customer-billing-address' href="javascript:void(0);">コピー</a>
 
<!-- お名前 -->
<label for="address_customer_shipping_name01">お名前</label>
{% if shop_form_settings['name_1_field'] %}
  <input class="validate[required]" type="text" value="{{ shipping_address.full_name }}" name="address_customer_shipping[name01]" autocomplete="name" id="address_customer_shipping_name01">
{% else %}
  <input class="validate[required]" type="text" value="{{ shipping_address.name01 }}" name="address_customer_shipping[name01]" autocomplete="family-name" id="address_customer_shipping_name01">
  <input class="validate[required]" type="text" value="{{ shipping_address.name02 }}" name="address_customer_shipping[name02]" autocomplete="given-name" id="address_customer_shipping_name02">
{% endif %}
 
<!-- フリガナ -->
<label for="address_customer_shipping_kana01">フリガナ</label>
{% if shop_form_settings['kana_1_field'] %}
  <input class="validate[required, custom[katakana]]" type="text" value="{{ shipping_address.full_kana }}" name="address_customer_shipping[kana01]" id="address_customer_shipping_kana01">
{% else %}
  <input class="validate[required, custom[katakana]]" type="text" value="{{ shipping_address.kana01 }}" name="address_customer_shipping[kana01]" id="address_customer_shipping_kana01">
  <input class="validate[required, custom[katakana]]" type="text" value="{{ shipping_address.kana02 }}" name="address_customer_shipping[kana02]" id="address_customer_shipping_kana02">
{% endif %}
 
<!-- 郵便番号 -->
<label for="address_customer_shipping_zip01">郵便番号</label>
{% if shop_form_settings['zip_1_field'] %}
  <span>〒</span>
  <input class="validate[required,custom[integer],minSize[7]]" type="tel" value="{{ shipping_address.full_zip }}" name="address_customer_shipping[zip01]" autocomplete="postal-code" id="address_customer_shipping_zip01" maxlength='7'>
{% else %}
  <span>〒</span>
  <input class="validate[required,custom[integer],minSize[3]]" type="tel" value="{{ shipping_address.zip01 }}" name="address_customer_shipping[zip01]" autocomplete="postal-code" id="address_customer_shipping_zip01" maxlength='3'>
  <span>−</span>
  <input class="validate[required,custom[integer],minSize[4]]" type="tel" value="{{ shipping_address.zip02 }}" name="address_customer_shipping[zip02]" autocomplete="none" id="address_customer_shipping_zip02" maxlength='4'>
{% endif %}
 
<!-- 都道府県 -->
<label for="address_customer_shipping_prefecture_id">都道府県</label>
<select class="validate[required]" name="address_customer_shipping[prefecture_id]" id="address_customer_shipping_prefecture_id">
  <option value="">選択してください</option>
  {% for prefecture in prefectures %}
    <option value='{{ prefecture.id }}' {% if shipping_address.prefecture.id == prefecture.id %}selected{% endif %}>{{ prefecture.name }}</option>
  {% endfor %}
</select>
 
<!-- 住所 -->
<label for="address_customer_shipping_addr01">住所</label>
<input class="validate[required]" type="text" name="address_customer_shipping[addr01]" id="address_customer_shipping_addr01" value="{{ shipping_address.addr01 }}">
{% if shop_form_settings['addr03'] %}
  <input class="validate[required]" type="text" value="{{ shipping_address.addr02 }}" name="address_customer_shipping[addr02]" id="address_customer_shipping_addr02">
  <input type="text" name="address_customer_shipping[addr03]" id="address_customer_shipping_addr03" value="{{ shipping_address.addr03 }}">
{% else %}
  <input class="validate[required]" type="text" value="{{ shipping_address.addr02 }}{{ shipping_address.addr03 }}" name="address_customer_shipping[addr02]" id="address_customer_shipping_addr02">
{% endif %}
 
<!-- 電話番号 -->
<label for="address_customer_shipping_tel01">電話番号</label>
{% if shop_form_settings['tel_1_field'] %}
  <input class="validate[required,custom[integer]]" type="tel" value="{{ shipping_address.full_tel }}" name="address_customer_shipping[tel01]" autocomplete="tel" id="address_customer_shipping_tel01" maxlength='12'>
{% else %}
  <input class="validate[required,custom[integer]]" type="tel" value="{{ shipping_address.tel01 }}" name="address_customer_shipping[tel01]" autocomplete="none" id="address_customer_shipping_tel01" maxlength='5'>
  <span>−</span>
  <input class="validate[required,custom[integer]]" type="tel" value="{{ shipping_address.tel02 }}" name="address_customer_shipping[tel02]" autocomplete="none" id="address_customer_shipping_tel02" maxlength='4'>
  <span>−</span>
  <input class="validate[required,custom[integer]]" type="tel" value="{{ shipping_address.tel03 }}" name="address_customer_shipping[tel03]" autocomplete="none" id="address_customer_shipping_tel03" maxlength='4'>
{% endif %}
 
<!-- FAX番号 -->
{% if shop_form_settings['fax'] %}
  <label for="address_customer_shipping_fax01">FAX番号</label>
  {% if shop_form_settings['fax_1_field'] %}
    <input type="tel" value="{{ shipping_address.full_fax }}" name="address_customer_shipping[fax01]" id="address_customer_shipping_fax01" maxlength='12'>
  {% else %}
    <input type="tel" value="{{ shipping_address.fax01 }}" name="address_customer_shipping[fax01]" id="address_customer_shipping_fax01" maxlength='5'>
    <span>−</span>
    <input type="tel" value="{{ shipping_address.fax02 }}" name="address_customer_shipping[fax02]" id="address_customer_shipping_fax02" maxlength='4'>
    <span>−</span>
    <input type="tel" value="{{ shipping_address.fax03 }}" name="address_customer_shipping[fax03]" id="address_customer_shipping_fax03" maxlength='4'>
  {% endif %}
{% endif %}
 
<!-- 会社名 -->
{% if shop_form_settings['company'] %}
  <label for="address_customer_shipping_company_name">会社名</label>
  <input type="text" value="{{ shipping_address.company_name }}" name="address_customer_shipping[company_name]" autocomplete="organization" id="address_customer_shipping_company_name">
{% endif %}
 
<!-- 上記のお届先情報の変更を反映させる購入済定期便一覧 -->
<label for="address_customer_shipping_subs_orders">購入済の定期便に反映させる</label>
 
  <!-- 全てに変更を反映させるチェックボックス -->
  <input id="toggle_all" type="checkbox" {{ checked }}>
 
  {% for subs_order in subs_orders %}
 
    <!-- 変更を反映させるチェックボックス -->
    <input name="subs_order_numbers[]" type="checkbox" value="{{ subs_order.number }}" {{ checked }}>
 
    <!-- 定期番号 -->
    {% if enabled_pre_order and subs_order.orders.first.unshipped_pre_order? %}
      {{ subs_order.number }}
    {% else %}
      <a href="/shop/customer/subs_orders/{{ subs_order.number }}">{{ subs_order.number }}</a>
    {% endif %}
 
    <!-- ステータス(任意) -->
    {{ subs_order.human_state_name }}
 
    <!-- 小計(任意) -->
    {{ subs_order.subtotal | number_to_currency: format: '%n %u' }}
 
    <!-- 作成日(任意) -->
    {{ subs_order.created_at | date: "%Y/%m/%d %H:%M" }}
 
    <!-- 商品名(任意) -->
    {{ subs_order.order_items | map: 'variant' | map: 'product' | map: 'name' | join ',' }}
 
    <!-- お届け先(任意) -->
    {{ subs_order.shipping_address.full_address }}
 
    <!-- 次回配送予定日(任意) -->
    {% if enabled_pre_order and subs_order.orders.first.unshipped_pre_order? %}
      *予約中
    {% else %}
      {{ subs_order.scheduled_to_be_delivered_at | date: "%Y/%m/%d" }}
    {% endif %}
 
  {% endfor %}
 
<!-- 送信ボタン -->
<input type="submit" name="commit" value="保存" data-disable-with="保存中...">
 
<!-- 戻るボタン -->
<a href="/shop/customer/shipping_addresses">戻る</a>
 
<!-- 次回配送予定日の変更が許可されているか(任意) -->
{% if base_info.scheduled_to_be_delivered_at_changeable_on_mypage? %}
  <!-- 受注変更可能日(任意) -->
  {% if subs_order_settings['new_order_creation_origin?'] %}
    <div style="color: red;">※定期情報の変更をする場合は、次回発送予定日の{{ subs_order_settings['create_new_order_x_days_before_shipping'] | plus: '1' }}日前までに行ってください。過ぎた場合は、次々回分からの受注に対して変更が反映されます。</div>
  {% else %}
    <div style="color: red;">※定期情報の変更をする場合は、次回配送予定日の{{ subs_order_settings['create_new_order_x_days_before_shipping'] | plus: '1' }}日前までに行ってください。過ぎた場合は、次々回分からの受注に対して変更が反映されます。</div>
  {% endif %}
{% endif %}