テーマ仕様書
shop
マイページ
定期受注
詳細

定期注文詳細画面 基本情報

会員の定期注文の基本情報を表示する画面です。

カスタム項目 (opens in a new tab)はオプション機能です。
本画面で確認・変更させるカスタム項目は ecforce管理画面の「ショップ管理 > 各種設定 > マイページ設定 (opens in a new tab)」での設定が必要です。

ショップのパス

ドメイン/shop/customer/subs_orders/定期受注ID

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

ec_force/shop/customer/subs_orders/show.html.liquid
ec_force/shop/customer/subs_orders/show.html+smartphone.liquid

JS タグ

{{ 'shop/customer/subs_orders' | javascript_include_tag }}

必要なコンポーネント

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

{{ 'shop/customer/subs_orders' | javascript_include_tag }}
 
<!-- (PCの場合)定期注文詳細タブ(任意) -->
{% assign template = 'shop/customer/subs_orders' %}
{% include 'ec_force/shop/customer/subs_orders/shared/nav.html' %}
 
<!-- (SPの場合)定期注文詳細タブ(任意) -->
{% assign template = 'shop/customer/subs_orders' %}
{% include 'ec_force/shop/customer/subs_orders/shared/nav.html+smartphone' %}
 
<!-- フラッシュメッセージ -->
{{ 'notice' | flash: 'alert alert-success', 'text' }}
{{ 'alert' | flash: 'alert alert-danger', 'text' }}
{{ 'error' | flash: 'alert alert-danger', 'text' }}
 
{% if base_info.variant_bulk_changeable_on_mypage? %}
  <!-- 商品の一括編集リンク -->
  <a href="/shop/customer/subs_orders/{{ subs_order.number }}/variant_bulk_changes/edit">商品の一括編集</a>
{% endif %}
 
<!-- 状態 -->
{{ subs_order.human_state_name }}
 
<!-- 小計 -->
{{ subs_order.subtotal | number_to_currency: format: '%n %u' }}
 
<!-- 自動注文発生件数 -->
{% if subs_order.remaining_number_of_orders %}
  残り{{ subs_order.remaining_number_of_orders }}回
{% else %}
  無制限
{% endif %}
 
<!-- ポイント利用 -->
{% if subs_order.all_point_redeem %}
  ポイントを全額消費する
{% else %}
  {{ subs_order.point_redeem | number_with_delimiter }}
{% endif %}
 
<!-- クーポンコード -->
{% if subs_order.coupon_id %}
  使用中
{% else %}
  未使用
{% endif %}
 
<!-- 支払い方法 -->
{{ subs_order.payment.payment_method.name }}
 
<!-- 配送サイクル -->
{{ subs_order.human_payment_schedule_name }}
 
<!-- 配送間隔 -->
{% if subs_order.payment_schedule == 'date' %}
  {{ subs_order.scheduled_to_be_delivered_every_x_month }}ヶ月ごとの{% if subs_order.scheduled_to_be_delivered_on_xth_day == 99 %}末{% else %}{{ subs_order.scheduled_to_be_delivered_on_xth_day }}{% endif %}日に配送
 
{% elsif subs_order.payment_schedule == 'term' %}
  {{ subs_order.scheduled_to_be_delivered_every_x_day }}日ごとに配送
 
{% elsif subs_order.payment_schedule == 'day_of_week' %}
  {{ subs_order.scheduled_to_be_delivered_every_x_month}}ヶ月ごとの{{ subs_order.scheduled_to_be_delivered_on_xth_day_of_week }}回目の{{ subs_order.human_scheduled_to_be_delivered_every_x_day_of_week }}曜日に配送
{% endif %}
 
<!-- お届け時間 -->
{% if subs_order.scheduled_delivery_time == blank %}
  指定なし
{% else %}
  {{ subs_order.scheduled_delivery_time }}
{% endif %}
 
<!-- 次回配送予定日 -->
{{ subs_order.scheduled_to_be_delivered_at | date: "%Y/%m/%d" }}
 
<!-- 作成日(任意) -->
{{ subs_order.created_at | date: "%Y/%m/%d %H:%M:%S" }}
 
<!-- カスタム項目 -->
{% if base_info.use_free_columns? and base_info.use_subs_order_free_columns_mypage? and liquid_custom_field != empty %}
  <!-- カスタム項目タイトル名 -->
  {{ base_info.subs_order_free_columns_title }}
  {% for custom_field_info in liquid_custom_field %}
    {% for custom_info in custom_field_info[1] %}
      {% assign info = custom_info[1] %}
      <!-- カテゴリ名 -->
      {% if info['category'] %}
        {{ info['category'] | escape }}
      {% endif %}
      {% for i_hash in info['info'] %}
        {% assign i = i_hash[1] %}
        <!-- 項目名 -->
        {{ i['free_columns_label'] | escape }}
        <!-- 入力、選択値 -->
        <!-- テキストエリアの改行を反映させたい場合はstyleに「white-space: pre-wrap;」を当てて下さい -->
        {{ i['free_column_values_value'] | join: ', ' | escape }}
      {% endfor %}
    {% endfor %}
  {% endfor %}
{% endif %}
 
<!-- 編集・再開 -->
{% if subs_order.active? %}
  <!-- 編集リンク -->
  <a href="/shop/customer/subs_orders/{{ subs_order.number }}/edit">編集</a>
{% elsif subs_order.reorderable_display_setting? %}
  <!-- 再開リンク -->
  <div id='subs-order-show-view'>
    <form action='/shop/customer/subs_orders/{{ subs_order.number }}' accept-charset='UTF-8' method='post'>
      <input type='hidden' name='_method' value='put'>
      <label for="subs_order_scheduled_to_be_delivered_at">
        次回配送予定日
      </label>
      <select class='validate[required]' id='subs_order_scheduled_to_be_delivered_at' name="subs_order[scheduled_to_be_delivered_at]">
        {% assign a = subs_order.scheduled_to_be_delivered_at | date: "%Y-%m-%d" %}
        {% for d in option_scheduled_to_be_delivered_at %}
          {% assign b = d | date: "%Y-%m-%d" %}
          <option value={{ d }} {% if a == b %}selected{% endif %}>{{ d }}</option>
        {% endfor %}
      </select>
      <!-- 支払い方法変更 -->
      {% if payment_methods_changable_flg %}
        <div id="payment-method-edit-view">
          <!-- 支払い方法変更 -->
          <label for="subs_order_payment_attributes_payment_method_id">支払方法</label>
          <select name="subs_order[payment_attributes][payment_method_id]" id="subs_order_payment_attributes_payment_method_id">
            {% for payment_method in payment_methods %}
              <option value="{{ payment_method.id }}" {% if subs_order.payment_method.id == payment_method.id %}selected{% endif %}>{{ payment_method.name }}</option>
            {% endfor %}
          </select>
          <!-- クレジットカード選択 -->
          <div id="credit-card">
            <label for="subs_order_payment_attributes_source_id">
              クレジットカード
            </label>
            <select class="validate[required]" name="subs_order[payment_attributes][source_id]" id="subs_order_payment_attributes_source_id">
              <option value="">--</option>
              {% for card in credit_cards %}
                <option value="{{ card.id }}" {% if selected_credit_card.id == card.id %}selected{% endif %}>{{ card.display_number_with_default }}</option>
              {% endfor %}
            </select>
            <input value="EcForce::CreditCard" type="hidden" name="subs_order[payment_attributes][source_type]" id="subs_order_payment_attributes_source_type">
            {% if base_info.credit_card_editable? %}
              <a href="/shop/customer/cards">クレジット新規登録はこちら</a>
            {% endif %}
          </div>
          <!-- 分割回数 -->
          <div class="form-group" style="display: none;">
            <label for="subs_order_payment_attributes_payment_times">
              分割回数
            </label>
            <select name="subs_order[payment_attributes][payment_times]" id="subs_order_payment_attributes_payment_times">
              {% for i in (2..24) %}
                <option value="{{ i }}" {% if subs_order.payment.payment_times == i %}selected{% endif %}>{{ i }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      {% endif %}
      <input type='hidden' name='subs_order[state]' value='active'>
      <input type='hidden' name='subs_order[reorderable]' value='true'>
      <input type='submit' name='commit' value="再開" data-disable_with='保存中...'>
    </form>
  </div>
{% endif %}
 
<!-- 定期購入停止リンク -->
{% if base_info.subs_order_cancelable? and subs_order.active? and subs_order.remaining_block_times == 0 %}
  {% if base_info.subs_order_cancelable_reason? and reasons.size != 0 %}
    <a href="/shop/customer/subs_orders/{{ subs_order.number }}/cancel">停止</a>
  {% else %}
    <a href="/shop/customer/subs_orders/{{ subs_order.number }}" data-method="delete" data-confirm="本当に停止しますか?">停止</a>
  {% endif %}
{% endif %}
 
<!-- 戻るリンク -->
<a href="/shop/customer/subs_orders">戻る</a>

画面イメージ

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