テーマ仕様書
shop
マイページ
購入履歴
受取店舗
詳細

購入履歴詳細画面 受取店舗情報

会員の購入履歴(注文情報)の受取店舗情報を表示する画面です。

ショップのパス

ドメイン/shop/customer/orders/受注ID/pickup_store

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

ec_force/shop/customer/orders/pickup_stores/show.html.liquid
ec_force/shop/customer/orders/pickup_stores/show.html+smartphone.liquid

必要なコンポーネント

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

<!-- (PCの場合)購入履歴詳細タブ(任意) -->
{% assign template = 'shop/customer/orders/pickup_store' %}
{% include 'ec_force/shop/customer/orders/shared/nav.html' %}
 
<!-- (SPの場合)購入履歴詳細タブ(任意) -->
{% assign template = 'shop/customer/orders/pickup_store' %}
{% include 'ec_force/shop/customer/orders/shared/nav.html+smartphone' %}
 
<!-- 購入履歴詳細画面 - 受取店舗情報コンテナ -->
<div id='pickup-store-view'>
 
  <!-- 店舗名 -->
  {{ order.pickup_store.name }}
 
  <!-- フリガナ -->
  {{ order.pickup_store.kana }}
 
  <!-- 郵便番号 -->
  {{ order.pickup_store.full_zip }}
 
  <!-- 住所 -->
  {{ order.pickup_store.full_address }}
 
  <!-- 電話番号 -->
  {{ order.pickup_store.full_tel }}
 
  <!-- FAX番号 -->
  {{ order.pickup_store.full_fax }}
 
  <!-- 営業時間 -->
  {{ order.pickup_store.business_hours }}
 
 
  <!-- 購入商品ごとの受取可能日一覧 -->
  {% for order_item in order.order_items %}
 
    <!-- 商品名 -->
    {{ order_item.product.name }}
 
    <!-- 規格名 -->
    {% if order_item.variant.option_values_presentation_with_slash %}
      {{ order_item.variant.option_values_presentation_with_slash }}
    {% endif %}
 
    <!-- 受取可能期間(受取可能日〜受取期限日) 表示は yyyy/mm/dd 〜 yyyy/mm/dd 形式で固定です -->
    {{ order_item.order_item_pick_term }}
 
    {% comment %} 受取可能日と受取期限日を個別に表示する場合
    受取可能日:{{ order_item.pickup_store_info.pickup_available_start_date | date: '%Y/%m/%d' }}
    受取期限日:{{ order_item.pickup_store_info.pickup_available_end_date | date: '%Y/%m/%d' }} {% endcomment %}
 
  {% endfor %}
 
  <!-- 戻るリンク -->
  <a href="/shop/customer/orders/{{ order.number }}">戻る</a>
</div>

画面イメージ

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