定期注文詳細画面 商品情報
会員の定期注文の商品情報を表示する画面です。
ショップのパス
ドメイン/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であてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。