テーマ仕様書
shop
マイページ
購入履歴
お届け先住所
編集

購入履歴詳細画面 お届け先情報の編集

会員の購入履歴(注文情報)のお届け先情報を編集する画面です。

ショップのパス

ドメイン/shop/customer/orders/受注ID/shipping_address/edit

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

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

JS タグ

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

必要なコンポーネント

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

{{ 'shop/customer/orders/shipping_addresses' | javascript_include_tag }}
 
<!-- (PCの場合)購入履歴詳細タブ(任意) -->
{% assign template = 'shop/customer/orders/shipping_address' %}
{% include 'ec_force/shop/customer/orders/shared/nav.html' %}
 
<!-- (SPの場合)購入履歴詳細タブ(任意) -->
{% assign template = 'shop/customer/orders/shipping_address' %}
{% include 'ec_force/shop/customer/orders/shared/nav.html+smartphone' %}
 
<!-- 購入履歴詳細画面 - お届け先情報の編集コンテナ -->
<div id="shipping-address-edit-view">
 
  <!-- 編集フォーム -->
  <form novalidate="novalidate" id="edit_address_order_shipping_{{ shipping_address.id }}" action="/shop/customer/orders/{{ order.number }}/shipping_address?shipping_address_id={{ shipping_address.id }}" 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' }}
 
    {% if order.multiple_shipping? %}
      <!-- 複数のお届け先の場合 -->
      <input type="hidden" value="{{ shipping_address.id }}" name="address_order_shipping[id]" id="address_order_shipping_id">
    {% endif %}
 
    <!-- お名前 -->
    <label for="address_order_shipping_name01">お名前</label>
    {% if shop_form_settings['name_1_field'] %}
      <input class="validate[required]" type="text" value="{{ shipping_address.full_name }}" name="address_order_shipping[name01]" autocomplete="name" id="address_order_shipping_name01">
    {% else %}
      <input class="validate[required]" type="text" value="{{ shipping_address.name01 }}" name="address_order_shipping[name01]" autocomplete="family-name" id="address_order_shipping_name01">
      <input class="validate[required]" type="text" value="{{ shipping_address.name02 }}" name="address_order_shipping[name02]" autocomplete="given-name" id="address_order_shipping_name02">
    {% endif %}
 
    <!-- フリガナ -->
    <label for="address_order_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_order_shipping[kana01]" id="address_order_shipping_kana01">
    {% else %}
      <input class="validate[required, custom[katakana]]" type="text" value="{{ shipping_address.kana01 }}" name="address_order_shipping[kana01]" id="address_order_shipping_kana01">
      <input class="validate[required, custom[katakana]]" type="text" value="{{ shipping_address.kana02 }}" name="address_order_shipping[kana02]" id="address_order_shipping_kana02">
    {% endif %}
 
    <!-- 郵便番号 -->
    <label for="address_order_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_order_shipping[zip01]" autocomplete="postal-code" id="address_order_shipping_zip01" maxlength="7">
    {% else %}
      <span>〒</span>
      <input class="validate[required,custom[integer],minSize[3]]" type="tel" value="{{ shipping_address.zip01 }}" name="address_order_shipping[zip01]" autocomplete="postal-code" id="address_order_shipping_zip01" maxlength="3">
      <span>−</span>
      <input class="validate[required,custom[integer],minSize[4]]" type="tel" value="{{ shipping_address.zip02 }}" name="address_order_shipping[zip02]" autocomplete="none" id="address_order_shipping_zip02" maxlength="4">
    {% endif %}
 
    <!-- 都道府県 -->
    <label for="address_order_shipping_prefecture_name">都道府県</label>
    <select class="validate[required]" name="address_order_shipping[prefecture_name]" id="address_order_shipping_prefecture_name">
      <option value="">選択してください</option>
      {% for prefecture in prefectures %}
        <option value='{{ prefecture.name }}' {% if shipping_address.prefecture.name == prefecture.name %}selected{% endif %}>{{ prefecture.name }}</option>
      {% endfor %}
    </select>
 
    <!-- 住所 -->
    <label for="address_order_shipping_addr01">住所</label>
    <input class="validate[required]" type="text" value="{{ shipping_address.addr01 }}" name="address_order_shipping[addr01]" id="address_order_shipping_addr01">
    {% if shop_form_settings['addr03'] %}
      <input class="validate[required]" type="text" value="{{ shipping_address.addr02 }}" name="address_order_shipping[addr02]" id="address_order_shipping_addr02">
      <input type="text" value="{{ shipping_address.addr03 }}" name="address_order_shipping[addr03]" id="address_order_shipping_addr03">
    {% else %}
      <input class="validate[required]" type="text" value="{{ shipping_address.addr02 }}{{ shipping_address.addr03 }}" name="address_order_shipping[addr02]" id="address_order_shipping_addr02">
    {% endif %}
 
    <!-- 電話番号 -->
    <label for="address_order_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_order_shipping[tel01]" autocomplete="tel" id="address_order_shipping_tel01" maxlength="12">
    {% else %}
      <input class="validate[required,custom[integer]]" type="tel" value="{{ shipping_address.tel01 }}" name="address_order_shipping[tel01]" autocomplete="none" id="address_order_shipping_tel01" maxlength="5">
      <span>−</span>
      <input class="validate[required,custom[integer]]" type="tel" value="{{ shipping_address.tel02 }}" name="address_order_shipping[tel02]" autocomplete="none" id="address_order_shipping_tel02" maxlength="4">
      <span>−</span>
      <input class="validate[required,custom[integer]]" type="tel" value="{{ shipping_address.tel03 }}" name="address_order_shipping[tel03]" autocomplete="none" id="address_order_shipping_tel03" maxlength="4">
    {% endif %}
 
    <!-- FAX番号 -->
    {% if shop_form_settings['fax'] %}
      <label for="address_order_shipping_fax01">FAX番号</label>
      {% if shop_form_settings['fax_1_field'] %}
        <input type="tel" value="{{ shipping_address.full_fax }}" name="address_order_shipping[fax01]" id="address_order_shipping_fax01">
      {% else %}
        <input type="tel" value="{{ shipping_address.fax01 }}" name="address_order_shipping[fax01]" id="address_order_shipping_fax01">
        <span>−</span>
        <input type="tel" value="{{ shipping_address.fax02 }}" name="address_order_shipping[fax02]" id="address_order_shipping_fax02">
        <span>−</span>
        <input type="tel" value="{{ shipping_address.fax03 }}" name="address_order_shipping[fax03]" id="address_order_shipping_fax03">
      {% endif %}
    {% endif %}
 
    <!-- 会社名 -->
    {% if shop_form_settings['company'] %}
      <label for="address_order_shipping_company_name">会社名</label>
      <input type="text" value="{{ shipping_address.company_name }}" name="address_order_shipping[company_name]" autocomplete="organization" id="address_order_shipping_company_name">
    {% endif %}
 
    <!-- 送信リンク -->
    <input type="submit" name="commit" value="保存" data-disable-with="保存中...">
 
    <!-- 戻るリンク -->
    <a href="/shop/customer/orders/{{ order.number }}">戻る</a>
 
  </form>
 
</div>

画面イメージ

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