定期注文詳細画面 お届け先情報の編集
会員の定期注文のお届け先情報を編集する画面です。
システムの仕様上、変更の反映は変更後に生成する受注からになります。
ショップのパス
ドメイン/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であてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。