購入履歴詳細画面 お届け先情報の編集
会員の購入履歴(注文情報)のお届け先情報を編集する画面です。
ショップのパス
ドメイン/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であてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。