お届けサイクル(部分テンプレート)
注文情報入力画面で利用する各入力フォーム用部分テンプレートです。
注文情報入力画面で include して利用します。(注文情報入力画面以外では利用できません)
テーマ管理のファイルパス
ec_force/shop/orders/_view_payment_schedule.html.liquid
ec_force/shop/orders/_view_payment_schedule.html+smartphone.liquid
必要なコンポーネント
任意とあるもの以外はシステム上必要なコンポーネントとなりますので、必ず使用するようにしてください。
<!-- 部分テンプレート(お届けサイクルの選択) -->
{% if pickup_store_is_available == true and delivery_to_address_is_checked == false %}
{% assign own_style = 'display: none;' %}
{% else %}
{% assign own_style = '' %}
{% endif %}
<div id='view-payment-schedule' style="{{ own_style }}">
{% if order.cv_upsell? %}
<input id='payment_schedule' name='preview_order[subs_order_attributes][payment_schedule]' type='hidden'>
<input id='payment_schedule_locked' name='preview_order[subs_order_attributes][payment_schedule_locked]' type='hidden'>
<input id='scheduled_to_be_delivered_every_x_month' name='preview_order[subs_order_attributes][scheduled_to_be_delivered_every_x_month]' type='hidden'>
<input id='scheduled_to_be_delivered_on_xth_day' name='preview_order[subs_order_attributes][scheduled_to_be_delivered_on_xth_day]' type='hidden'>
<input id='scheduled_to_be_delivered_every_x_day' name='preview_order[subs_order_attributes][scheduled_to_be_delivered_every_x_day]' type='hidden'>
<input id='scheduled_to_be_delivered_on_xth_day_of_week' name='preview_order[subs_order_attributes][scheduled_to_be_delivered_on_xth_day_of_week]' type='hidden'>
<input id='scheduled_to_be_delivered_every_x_day_of_week' name='preview_order[subs_order_attributes][scheduled_to_be_delivered_every_x_day_of_week]' type='hidden'>
<input id='scheduled_2nd_delivery_date' name='preview_order[subs_order_attributes][scheduled_to_be_delivered_at]' type='hidden'>
<input id='scheduled_2nd_delivery_time' name='preview_order[subs_order_attributes][scheduled_delivery_time]' type='hidden'>
<input id='scheduled_to_be_delivered_at' type='hidden'>
<input id='scheduled_1st_delivery_date' name='preview_order[scheduled_to_be_delivered_at]' type='hidden'>
<input id='scheduled_1st_delivery_time' name='preview_order[scheduled_delivery_time]' type='hidden'>
<input id='selected_scheduled_delivery_time' value="{{ order.scheduled_delivery_time }}" type='hidden'>
{% else %}
<input id='payment_schedule' name='order[subs_order_attributes][payment_schedule]' type='hidden'>
<input id='payment_schedule_locked' name='order[subs_order_attributes][payment_schedule_locked]' type='hidden'>
<input id='scheduled_to_be_delivered_every_x_month' name='order[subs_order_attributes][scheduled_to_be_delivered_every_x_month]' type='hidden'>
<input id='scheduled_to_be_delivered_on_xth_day' name='order[subs_order_attributes][scheduled_to_be_delivered_on_xth_day]' type='hidden'>
<input id='scheduled_to_be_delivered_every_x_day' name='order[subs_order_attributes][scheduled_to_be_delivered_every_x_day]' type='hidden'>
<input id='scheduled_to_be_delivered_on_xth_day_of_week' name='order[subs_order_attributes][scheduled_to_be_delivered_on_xth_day_of_week]' type='hidden'>
<input id='scheduled_to_be_delivered_every_x_day_of_week' name='order[subs_order_attributes][scheduled_to_be_delivered_every_x_day_of_week]' type='hidden'>
<input id='scheduled_2nd_delivery_date' name='order[subs_order_attributes][scheduled_to_be_delivered_at]' type='hidden'>
<input id='scheduled_2nd_delivery_time' name='order[subs_order_attributes][scheduled_delivery_time]' type='hidden'>
<input id='scheduled_to_be_delivered_at' type='hidden'>
<input id='scheduled_1st_delivery_date' name='order[scheduled_to_be_delivered_at]' type='hidden'>
<input id='scheduled_1st_delivery_time' name='order[scheduled_delivery_time]' type='hidden'>
<input id='selected_scheduled_delivery_time' value="{{ order.scheduled_delivery_time }}" type='hidden'>
{% endif %}
<!-- お届けサイクル -->
<div id='container_payment_schedule'>
<!-- お届けサイクル タイトル はカート内に予約商品が存在するかどうかで、form_label_caption_delivery とform_label_caption_delivery_pre_order を JS で切り替えます -->
<!-- お届けサイクル タイトル(任意) -->
<div id='form_label_caption_delivery'>お届け日の指定</div>
<!-- お届けサイクル タイトル(任意)※予約商品が入っている場合は下記を表示します -->
<div id='form_label_caption_delivery_pre_order' style='display:none;'>お届け日時</div>
<!-- お届けサイクルの指定 -->
<div id='container_delivery_cycle' style='display:none;'>
<label>お届けサイクルの指定</label>
<select class='validate[required]' id='select_payment_schedule'>
<option value="date">日付で指定</option>
<option value="term">間隔で指定</option>
<option value="day_of_week">曜日で指定</option>
</select>
</div>
<!-- 日付で指定 -->
<div id='container_delivery_schedule_by_date' style='display:none;'>
<select class='validate[required]' id='select_scheduled_to_be_delivered_every_x_month'>
{% for d in order.available_delivery_dates %}
<option value='{{ d.month }}'>{{ d.month }}ヶ月</option>
{% endfor %}
</select>
<span>ごとの</span>
<select class='validate[required]' id='select_scheduled_to_be_delivered_on_xth_day'>
{% for d in (1..28) %}
<option value='{{ d }}'>{{ d }}日</option>
{% endfor %}
<option value="99">末日</option>
</select>
<span>にお届け</span>
</div>
<!-- 間隔で指定 -->
<div id='container_delivery_schedule_by_term' style='display:none;'>
<select class='validate[required,custom[integer]]' id='select_scheduled_to_be_delivered_every_x_day'>
{% for i in order.available_delivery_intervals %}
<option value="{{ i.day }}">{{ i.day }}日</option>
{% endfor %}
</select>
<span>間隔でお届け</span>
</div>
<!-- 曜日で指定 -->
<div id='container_delivery_schedule_by_day_of_week' style='display:none;'>
<select id='select_scheduled_to_be_delivered_every_x_month_by_day_of_week' class='validate[required]'>
{% for d in order.available_delivery_dates %}
<option value='{{ d.month }}'>{{ d.month }}ヶ月</option>
{% endfor %}
</select>
<span>ごとの</span>
<select id='select_scheduled_to_be_delivered_on_xth_day_of_week' class='validate[required]'>
{% for n in (1..4) %}
<option value='{{ n }}'>{{ n }}</option>
{% endfor %}
</select>
<span>回目の</span>
<select id='select_scheduled_to_be_delivered_every_x_day_of_week' class='validate[required]'>
{% for d in (0..6) %}
<option value='{{ d }}'>{{ day_of_weeks[d] }}</option>
{% endfor %}
</select>
<span>曜日に配送</span>
</div>
</div>
<!-- お届け日 -->
<div id='container_delivery_schedule_date' style='display:none;'>
<!-- お届け日の選択 -->
<select id='select_scheduled_to_be_delivered_at'>
{% if order.recurring_item? %}
{% assign allow_nil = subs_order_settings['allow_nil_in_delivery_date?'] %}
{% else %}
{% assign allow_nil = order_settings['allow_nil_in_delivery_date?'] %}
{% endif %}
{% if allow_nil %}
<option value=''>指定なし</option>
{% endif %}
{% for d in option_scheduled_to_be_delivered_at %}
{% assign a = order.scheduled_to_be_delivered_at | date: "%Y-%m-%d" %}
{% assign b = d | date: "%Y-%m-%d" %}
<option value={{ d }} {% if a == b %}selected{% endif %}>{{ d }}</option>
{% endfor %}
</select>
<span>にお届け</span>
</div>
<!-- お届け時間 -->
<div id='container_delivery_schedule_time' style='display:none;'>
<select id='select_scheduled_delivery_time'></select>
<span>に配達</span>
</div>
<!-- お届け予定日 -->
<div id='container_scheduled_delivery_dates' style='display:none;'>
<div id='scheduled_1st_delivery_date_text' style='display:none;'></div>
<div id='scheduled_2nd_delivery_date_text' style='display:none;'></div>
</div>
<!-- お届け予定時期 -->
<div id='container_pre_ordered_delivery_description' style='display:none;'>
<!-- お届け予定時期 タイトル はカート内に定期商品が存在するかどうかで、pre_ordered_delivery_description_label_single と pre_ordered_delivery_description_label_recurring を JS で切り替えます -->
<!-- お届け予定時期 タイトル(任意) -->
<div id='pre_ordered_delivery_description_label_single' style='display:none;'>お届け予定時期</div>
<!-- お届け予定時期 タイトル(任意)※定期商品が入っている場合は下記を表示します -->
<div id='pre_ordered_delivery_description_label_recurring' style='display:none;'>初回お届け予定時期</div>
<!-- お届け予定時期 -->
<div id='pre_ordered_delivery_description' style='display:none;'></div>
</div>
<!-- 複数のお届け先がある場合の注釈 -->
<div id="container_multiple_shipping_caution" style='display:none;'>
※複数のお届け先を指定する場合は、お届け日時は選択できません
</div>
</div>