テーマ仕様書
shop
マイページ
定期受注
お届け先
編集

定期注文詳細画面 お届け先情報の編集

会員の定期注文のお届け先情報を編集する画面です。
システムの仕様上、変更の反映は変更後に生成する受注からになります。

ショップのパス

ドメイン/shop/customer/subs_orders/定期受注ID/shipping_address/edit

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

ec_force/shop/customer/subs_orders/shipping_addresses/edit.html.liquid
ec_force/shop/customer/subs_orders/shipping_addresses/edit.html+smartphone.liquid

JS タグ

{{ 'shop/customer/subs_orders/shipping_addresses' | javascript_include_tag }}

必要なコンポーネント

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

{{ 'shop/customer/subs_orders/shipping_addresses' | javascript_include_tag }}
 
<!-- (PCの場合)定期注文詳細タブ(任意) -->
{% assign template = 'shop/customer/subs_orders/shipping_address' %}
{% include 'ec_force/shop/customer/subs_orders/shared/nav.html' %}
 
<!-- (SPの場合)定期注文詳細タブ(任意) -->
{% assign template = 'shop/customer/subs_orders/shipping_address' %}
{% include 'ec_force/shop/customer/subs_orders/shared/nav.html+smartphone' %}
 
<!-- 定期注文詳細画面-お届け先情報編集コンテナ -->
<div id="shipping-address-edit-view">
  
  
  <!-- 編集フォーム -->
  <form novalidate="novalidate" action="/shop/customer/subs_orders/{{ subs_order.number }}/shipping_address" accept-charset="UTF-8" method="post">
    <input name="utf8" type="hidden" value="✓">
    <input type="hidden" name="_method" value="put">
 
    <!-- フラッシュメッセージ -->
    {{ 'notice' | flash: 'alert alert-success', 'text' }}
    {{ 'alert' | flash: 'alert alert-danger', 'text' }}
    {{ 'error' | flash: 'alert alert-danger', 'text' }}
 
 
    <!-- お届け先住所をコピー -->
    <label for="copy-shipping-address-id">お届け先住所をコピー</label>
    <select id="copy-shipping-address-id">
      <option value="">選択してください</option>
      {% for shipping_address in subs_order.customer.shipping_addresses %}
        <option value="{{ shipping_address.id }}"> {{ shipping_address.full_name }} | 〒{{ shipping_address.full_zip }} {{ shipping_address.full_address_with_space }}</option>
      {% endfor %}
    </select>
    <a href="javascript:void(0);" id="copy-shipping-address">コピー</a>
 
 
    <!-- お名前 -->
    <label for="address_subs_order_shipping_name01">お名前</label>
    {% if shop_form_settings['name_1_field'] %}
      <input class="validate[required]" type="text" value="{{ subs_order.shipping_address.full_name }}" name="address_subs_order_shipping[name01]" autocomplete="name" id="address_subs_order_shipping_name01">
    {% else %}
      <input class="validate[required]" type="text" value="{{ subs_order.shipping_address.name01 }}" name="address_subs_order_shipping[name01]" autocomplete="family-name" id="address_subs_order_shipping_name01">
      <input class="validate[required]" type="text" value="{{ subs_order.shipping_address.name02 }}" name="address_subs_order_shipping[name02]" autocomplete="given-name" id="address_subs_order_shipping_name02">
    {% endif %}
 
    <!-- フリガナ -->
    <label for="address_subs_order_shipping_kana01">フリガナ</label>
    {% if shop_form_settings['kana_1_field'] %}
      <input class="validate[required, custom[katakana]]" type="text" value="{{ subs_order.shipping_address.full_kana }}" name="address_subs_order_shipping[kana01]" id="address_subs_order_shipping_kana01">
    {% else %}
      <input class="validate[required, custom[katakana]]" type="text" value="{{ subs_order.shipping_address.kana01 }}" name="address_subs_order_shipping[kana01]" id="address_subs_order_shipping_kana01">
      <input class="validate[required, custom[katakana]]" type="text" value="{{ subs_order.shipping_address.kana02 }}" name="address_subs_order_shipping[kana02]" id="address_subs_order_shipping_kana02">
    {% endif %}
          
    <!-- 郵便番号 -->
    <label for="address_subs_order_shipping_zip01">郵便番号</label>
    {% if shop_form_settings['zip_1_field'] %}
      <span>〒</span>
      <input class="validate[required,custom[integer],minSize[7]]" type="tel" value="{{ subs_order.shipping_address.full_zip }}" name="address_subs_order_shipping[zip01]" autocomplete="postal-code" id="address_subs_order_shipping_zip01" maxlength='7'>
    {% else %}
      <span>〒</span>
      <input class="validate[required,custom[integer],minSize[3]]" type="tel" value="{{ subs_order.shipping_address.zip01 }}" name="address_subs_order_shipping[zip01]" autocomplete="postal-code" id="address_subs_order_shipping_zip01" maxlength='3'>
      <span>−</span>
      <input class="validate[required,custom[integer],minSize[4]]" type="tel" value="{{ subs_order.shipping_address.zip02 }}" name="address_subs_order_shipping[zip02]" autocomplete="none" id="address_subs_order_shipping_zip02" maxlength='4'>
    {% endif %}
 
    <!-- 都道府県 -->
    <label for="address_subs_order_shipping_prefecture_id">都道府県</label>
      <select class="validate[required]" name="address_subs_order_shipping[prefecture_id]" id="address_subs_order_shipping_prefecture_id">
        <option value="">選択してください</option>
        {% for prefecture in prefectures %}
          <option value='{{ prefecture.id }}' {% if subs_order.shipping_address.prefecture.id == prefecture.id %}selected{% endif %}>{{ prefecture.name }}</option>
        {% endfor %}
      </select>
 
    <!-- 住所 -->
    <label for="address_subs_order_shipping_addr01">住所</label>
    <input class="validate[required]" type="text" value="{{ subs_order.shipping_address.addr01 }}" name="address_subs_order_shipping[addr01]" id="address_subs_order_shipping_addr01">
    {% if shop_form_settings['addr03'] %}
      <input class="validate[required]" type="text" value="{{ subs_order.shipping_address.addr02 }}" name="address_subs_order_shipping[addr02]" id="address_subs_order_shipping_addr02">
      <input type="text" value="{{ subs_order.shipping_address.addr03 }}" name="address_subs_order_shipping[addr03]" id="address_subs_order_shipping_addr03">
    {% else %}
      <input class="validate[required]" type="text" value="{{ subs_order.shipping_address.addr02 }}{{ subs_order.shipping_address.addr03 }}" name="address_subs_order_shipping[addr02]" id="address_subs_order_shipping_addr02">
    {% endif %}
 
    <!-- 電話番号 -->
    <label for="address_subs_order_shipping_tel01">電話番号</label>
    {% if shop_form_settings['tel_1_field'] %}
      <input class="validate[required,custom[integer]]" type="tel" value="{{ subs_order.shipping_address.full_tel }}" name="address_subs_order_shipping[tel01]" autocomplete="tel" id="address_subs_order_shipping_tel01" maxlength='12'>
    {% else %}
      <input class="validate[required,custom[integer]]" type="tel" value="{{ subs_order.shipping_address.tel01 }}" name="address_subs_order_shipping[tel01]" autocomplete="none" id="address_subs_order_shipping_tel01" maxlength='5'>
      <span>−</span>
      <input class="validate[required,custom[integer]]" type="tel" value="{{ subs_order.shipping_address.tel02 }}" name="address_subs_order_shipping[tel02]" autocomplete="none" id="address_subs_order_shipping_tel02" maxlength='4'>
      <span>−</span>
      <input class="validate[required,custom[integer]]" type="tel" value="{{ subs_order.shipping_address.tel03 }}" name="address_subs_order_shipping[tel03]" autocomplete="none" id="address_subs_order_shipping_tel03" maxlength='4'>
    {% endif %}
 
    <!-- FAX番号 -->
    {% if shop_form_settings['fax'] %}
      <label for="address_subs_order_shipping_fax01">FAX番号</label>
      {% if shop_form_settings['fax_1_field'] %}
        <input type="tel" value="{{ subs_order.shipping_address.full_fax }}" name="address_subs_order_shipping[fax01]" id="address_subs_order_shipping_fax01" maxlength='12'>
      {% else %}
        <input type="tel" value="{{ subs_order.shipping_address.fax01 }}" name="address_subs_order_shipping[fax01]" id="address_subs_order_shipping_fax01" maxlength='5'>
        <span>−</span>
        <input type="tel" value="{{ subs_order.shipping_address.fax02 }}" name="address_subs_order_shipping[fax02]" id="address_subs_order_shipping_fax02" maxlength='4'>
        <span>−</span>
        <input type="tel" value="{{ subs_order.shipping_address.fax03 }}" name="address_subs_order_shipping[fax03]" id="address_subs_order_shipping_fax03" maxlength='4'>
      {% endif %}
    {% endif %}
 
    <!-- 会社名 -->
    {% if shop_form_settings['company'] %}
      <label for="address_subs_order_shipping_company_name">会社名</label>
      <input type="text" value="{{ subs_order.shipping_address.company_name }}" name="address_subs_order_shipping[company_name]" autocomplete="organization" id="address_subs_order_shipping_company_name">
    {% endif %}
 
    <!-- 送信リンク -->
    <input type="submit" name="commit" value="保存" data-disable-with="保存中...">
    
    <!-- 戻るリンク -->
    <a href="/shop/customer/subs_orders/{{ subs_order.number }}">戻る</a>
 
  </form>
 
</div>

画面イメージ

※こちらは、上記で紹介しているコンポーネントのコードにデフォルトデザインをCSSであてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。