テーマ仕様書
shop
マイページ
定期受注
商品
商品情報

定期注文詳細画面 商品情報

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

ショップのパス

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

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

ec_force/shop/customer/subs_orders/order_items/index.html.liquid
ec_force/shop/customer/subs_orders/order_items/index.html+smartphone.liquid

JS タグ

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

必要なコンポーネント

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

{{ 'shop/customer/subs_orders/order_items' | javascript_include_tag }}
 
<!-- (SPの場合)定期注文詳細タブ(任意) -->
{% assign template = 'shop/customer/subs_orders/order_items' %}
{% include 'ec_force/shop/customer/subs_orders/shared/nav.html+smartphone' %}
 
<!-- (PCの場合)定期注文詳細タブ(任意) -->
{% assign template = 'shop/customer/subs_orders/order_items' %}
{% include 'ec_force/shop/customer/subs_orders/shared/nav.html' %}
 
<!-- フラッシュメッセージ -->
{{ 'notice' | flash: 'alert alert-success', 'text' }}
{{ 'alert' | flash: 'alert alert-danger', 'text' }}
{{ 'error' | flash: 'alert alert-danger', 'text' }}
 
<!-- ポイント機能有効時 -->
{% if base_info.use_point? and base_info.point_event_redeem %}
 
  <!-- 現在の所持ポイント -->
  {{ current_customer.available_point_total | number_with_delimiter }}
 
  <!-- ポイント利用上限 -->
  {{ base_info.point_event_redeem.point_upper_limit | number_with_delimiter }}
 
  <!-- ポイント利用下限 -->
  {{ base_info.point_event_redeem.point_lower_limit | number_with_delimiter }}
 
{% endif %}
 
<!-- 一部商品の配送サイクル変更 -->
{% if changeable_subs_order %}
  <a href="/shop/customer/subs_orders/{{ subs_order.number }}/delivery_cycles">一部商品の配送サイクル変更</a>
{% endif %}
 
<!-- 商品一覧 -->
{% for order_item in subs_order.order_items %}
 
  <!-- 商品名 -->
  {{ order_item.variant.product.name }}
 
  <!-- 規格(任意) -->
  {% if order_item.variant.option_values_presentation == blank %}
    未設定
  {% else %}
    {{ order_item.variant.option_values_presentation }}
  {% endif %}
 
  <!-- 個数 -->
  {{ order_item.quantity }}
 
  <!-- 単価(任意) -->
  {{ order_item.price | number_to_currency: format: '%n %u' }}
 
  <!-- 個数 -->
  {{ order_item.quantity }}個
  {% if order_item.point_exchange_reserved? %}
    / {{ order_item.point_exchange_quantity }}個(ポイント商品交換)
  {% endif %}
  {% if order_item.set_item_selected? %}
    / {{ order_item.set_item_quantity }}個(セット商品)
  {% endif %}
  {% if order_item.distribution_item_quantity != 0 %}
    {% if order_item.quantity_without_distribution_items == 0 %}
      (頒布会選択商品)
    {% else %}
      / {{ order_item.distribution_item_quantity }}個(頒布会選択商品)
    {% endif %}
  {% endif %}
  {% if order_item.skip? %}
    (次回スキップ)
  {% endif %}
 
  <!-- 価格 -->
  {% if order_item.point_exchange_reserved? %}
    {{ order_item.subtotal_price | number_to_currency: format: '%n%u' }}(ポイント商品交換: {{ order_item.point_exchange_reservation.point_redeem }}ポイント)
  {% else %}
    {{ order_item.subtotal_price | number_to_currency: format: '%n%u' }}
  {% endif %}
 
 
  <!-- 編集リンク -->
  {% if base_info.variant_changeable_on_mypage? or base_info.variant_quantity_changeable_on_mypage? %}
    {% if order_item.distribution_club? and order_item.distribution_club.changeable_on_mypage %}
      <a href="/shop/customer/subs_orders/{{ subs_order.number }}/distribution_clubs/{{ order_item.distribution_club.id }}/edit">頒布会商品を編集する</a>
    {% elsif order_item.set? %}
      <a href="/shop/customer/subs_orders/{{ subs_order.number }}/sets/edit">セットの内容を編集する</a>      
    {% elsif order_item.bundled_item? == false and order_item.set? == false and order_item.distribution_club? == false and order_item.quantity_without_distribution_items != 0 %}
      <a href="/shop/customer/subs_orders/{{ subs_order.number }}/order_items/{{ order_item.id }}/edit">編集</a>
    {% endif %}
  {% endif %}
 
{% endfor %}
 
<!-- 商品の追加(任意) -->
{% if base_info.variant_addable_on_mypage? and products_addable_on_mypage_in_all_variants%}
  {% for product in addable_products %}
    <a href="/shop/customer/subs_orders/{{ subs_order.number }}/order_items/add?product_number={{ product.number }}">
      {% if product.thumbnail.url %}
        {% assign src = product.thumbnail.url %}
      {% else %}
        {% assign src = 'missing' | image_url %}
      {% endif %}
      <img src="{{ src }}">
    </a>
    <p>{{ product.name | truncate: 35 }}</p>
    {% assign options = "" %}
    {% assign options = options | append: product.id | append: "," | append: subs_order.times %}
    {% assign options_array = options | split: "," %}
    <p>販売価格:<span>{{ options_array | liquid_recurring_time_price | number_to_currency: format: '%n %u' }}</span></p>
    <!-- 追加商品バッジ(任意) -->
    {% if delivery_group_badge_flg_hash[product.id] or concurrent_purchase_group_badge_flg_hash[product.id] %}
      <!-- 配送温度帯ラベル(任意) -->
      {% for delivery_group_name in product.delivery_group_names %}
        {{ delivery_group_name }}
      {% endfor %}
      <!-- 同時購入グループバッジ(任意) -->
      <!-- 「バッジ表示名」を表示したい場合、product.concurrent_purchase_group_names を product.concurrent_purchase_badge_names に修正してください。 -->
      {% for concurrent_purchase_group_name in product.concurrent_purchase_group_names %}
        {{ concurrent_purchase_group_name }}
      {% endfor %}
    {% endif %}
    <a href="/shop/customer/subs_orders/{{ subs_order.number }}/order_items/add?product_number={{ product.number }}">
      <button>追加する</button>
    </a>
  {% endfor %}
{% endif %}
 
<!-- ポイント商品交換予約 -->
{% if base_info.use_point? and base_info.exchange_items_with_points? and base_info.variant_point_exchange_on_mypage? and subs_order.active? %}
  {% for variant in point_exchangeable_variants %}
 
    <!-- 商品名 -->
    {{ variant.name }}
 
    <!-- 規格 -->
    {% if variant.option_values_presentation == blank %}
      未設定
    {% else %}
      {{ variant.option_values_presentation }}
    {% endif %}
 
    <!-- 必要なポイント -->
    {{ variant.sales_price }}
 
    <!-- 操作 -->
    <form id="new_order_item" action="/shop/customer/subs_orders/{{ subs_order.number }}/point_exchange_reservations" accept-charset="UTF-8" method="post">
      <input name="utf8" type="hidden" value="✓">
      <input value="{{ variant.id }}" type="hidden" name="order_item[variant_id]" id="order_item_variant_id">
      <input type="submit" name="commit" value="ポイント予約" data-disable-with="保存中...">
    </form>
 
  {% endfor %}
{% endif %}
 
<!-- 戻るリンク -->
<a href="/shop/customer/subs_orders">戻る</a>

画面イメージ

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