テーマ仕様書
shop
購入画面
お届けサイクル★

お届けサイクル(部分テンプレート)

注文情報入力画面で利用する各入力フォーム用部分テンプレートです。
注文情報入力画面で 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>