テーマ仕様書
shop
マイページ
購入履歴
お届け先住所
詳細

購入履歴詳細画面 お届け先情報

会員の購入履歴(注文情報)のお届け先情報を表示する画面です。

ショップのパス

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

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

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

JS タグ

{{ 'shop/customer/orders/shipping_addresses' | javascript_include_tag }}

必要なコンポーネント

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

{{ 'shop/customer/orders/shipping_addresses' | javascript_include_tag }}
 
<!-- (PCの場合)購入履歴詳細タブ(任意) -->
{% assign template = 'shop/customer/orders/shipping_address' %}
{% include 'ec_force/shop/customer/orders/shared/nav.html' %}
 
<!-- (SPの場合)購入履歴詳細タブ(任意) -->
{% assign template = 'shop/customer/orders/shipping_address' %}
{% include 'ec_force/shop/customer/orders/shared/nav.html+smartphone' %}
 
{% unless order.multiple_shipping? %}
  <!-- 複数のお届け先ではない場合 -->
 
  <!-- 購入履歴詳細画面 - お届け先情報コンテナ -->
  <div id='shipping-address-view'>
 
    <!-- お名前 -->
    {{ order.shipping_address.full_name }}
 
    <!-- お名前(カナ) -->
    {{ order.shipping_address.full_kana }}
 
    <!-- 郵便番号 -->
    {{ order.shipping_address.full_zip }}
 
    <!-- 住所 -->
    {{ order.shipping_address.full_address }}
 
    <!-- 電話番号 -->
    {{ order.shipping_address.full_tel }}
 
    <!-- FAX 番号(任意) -->
    {{ order.shipping_address.full_fax }}
 
    <!-- 編集リンク -->
    {% unless order.state == 'shipped' or order.state == 'delivered' %}
      <a href="/shop/customer/orders/{{ order.number }}/shipping_address/edit">編集</a>
    {% endunless %}
 
    <!-- 戻るリンク -->
    <a href="/shop/customer/orders/{{ order.number }}">戻る</a>
 
  </div>
{% else %}
  <!-- 複数のお届け先の場合 -->
  <div id='shipping-addresses-view'>
 
    {% for shipping_address in order.shipping_addresses %}
 
      <!-- お名前 -->
      {{ shipping_address.full_name }}
 
      <!-- お名前(カナ) -->
      {{ shipping_address.full_kana }}
 
      <!-- 郵便番号 -->
      {{ shipping_address.full_zip }}
 
      <!-- 住所 -->
      {{ shipping_address.full_address }}
 
      <!-- 電話番号 -->
      {{ shipping_address.full_tel }}
 
      <!-- FAX 番号(任意) -->
      {{ shipping_address.full_fax }}
 
      <!-- 配送業者 -->
      {{ shipping_address.shipping_carrier.name }}
 
      <!-- 配送伝票番号 -->
      {% if shipping_address.tracking_url == blank %}
        {{ shipping_address.shipping_slip }}
      {% else %}
        <a href="{{ shipping_address.tracking_url }}" target="_blank">{{ shipping_address.shipping_slip }}</a>
      {% endif %}
 
      {% if enabled_pre_order and order.unshipped_pre_order? %}
        <!-- お届け予定時期 -->
        {{ order.pre_ordered_delivery_description_snapshot }}
      {% else %}
        <!-- 発送予定日 -->
        {{ shipping_address.scheduled_to_be_shipped_at | date: '%Y/%m/%d %H:%M:%S' }}
 
        <!-- 発送完了日 -->
        {{ shipping_address.shipped_at | date: '%Y/%m/%d %H:%M:%S' }}
 
        <!-- 配送予定日 -->
        {{ shipping_address.scheduled_to_be_delivered_at | date: '%Y/%m/%d %H:%M:%S' }}
      {% endif %}
 
      <!-- お届け時間 -->
      {% if shipping_address.scheduled_delivery_time == blank %}
        {{ '指定なし' }}
      {% else %}
        {{ shipping_address.scheduled_delivery_time }}
      {% endif %}
 
      <!-- 商品情報 -->
      {% for order_item in shipping_address.order_items_and_gift_order_items %}
        <!-- 商品名 -->
        {{ order_item.variant.name_with_option_values_presentation }}
          (
          <!-- 商品個数 -->
          {{ order_item.id | quantity_of: shipping_address.id }} 個
          )
      {% endfor %}
 
      {% unless order.state == 'shipped' or order.state == 'delivered' %}
        <a href="/shop/customer/orders/{{ order.number }}/shipping_address/edit?shipping_address_id={{ shipping_address.id }}">編集</a>
      {% endunless %}
      <a href="/shop/customer/orders/{{ order.number }}">戻る</a>
 
    {% endfor %}
  </div>
{% endunless %}

画面イメージ

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