テーマ仕様書
shop
購入画面
注文情報確認

注文情報確認画面

注文確定前、購入商品情報や金額、お客様情報など購入に関する情報を確認するページです。
以下の項目を変数で取得できます。

  • 注文商品情報
    • 商品名
    • 単価 (税抜)
    • 個数
    • 小計 (税抜)
    • 注文小計
    • 8%対象小計
    • 10%対象小計
    • 割引
    • 8%対象割引
    • 10%対象割引
    • ポイント利用
    • ラッピング代
    • 送料
    • 手数料
    • 消費税
    • 8%対象消費税
    • 10%対象消費税
    • 合計
    • 付与予定ポイント
    • 注意喚起文(上部)
    • 注意喚起文
    • 税率の印の説明
  • ギフト設定情報
    • ギフト商品名
    • ギフト対象商品名
    • 表書き(ギフト商品が熨斗の場合)
    • 名入れ(ギフト商品が熨斗の場合)
    • ギフト商品個数
  • 購入者情報
    • お名前
    • フリガナ
    • 住所
    • 電話番号
    • メールアドレス
    • ショップからのお知らせ
  • お届け先情報
    • お名前
    • フリガナ
    • 住所
    • 電話番号
  • 複数のお届け先がある場合のお届け先情報
    • お名前
    • フリガナ
    • 住所
    • 電話番号
    • お届け先登録
    • 商品情報
    • 配送業者
  • ラッピング
    • ラッピング名
    • ラッピング画像
  • 配送業者名
  • お支払い情報
    • 支払い方法名
    • クレジットカード情報 (クレジットカード一括, クレジットカード分割, クレジットカードリボ選択時のみ)
    • 分割回数 (クレジットカード分割選択時のみ)
  • お届けサイクル
    • 1回目お届け予定日時
    • 2回目お届け予定日時 (定期商品のみ)
  • カスタム項目(オプション機能)
    • カスタム項目タイトル名
    • カテゴリ名
    • 項目名
    • 入力、選択肢

ショップのパス

ドメイン/shop/order/confirm

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

ec_force/shop/orders/confirm.html.liquid
ec_force/shop/orders/confirm.html+smartphone.liquid

JS タグ

{{ 'shop/orders' | javascript_include_tag }}

必要なコンポーネント

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

{{ 'shop/orders' | javascript_include_tag }}
 
<!-- 注文情報確認画面 -->
<div id="confirm-view">
  <!-- 決済モジュールを呼び出すのに必要なタグ -->
  <div id="ModuleJs"></div>
  
  <!-- 注意喚起文(画面上部)-->
  {% for order_item in order.order_items %}
    {% unless order_item.variant.product.caution02 == blank %}
      {{ order_item.variant.product.caution02 }}
    {% endunless %}
  {% endfor %}
 
  <!-- 注文商品情報 -->
 
    <!-- 注文商品一覧 -->
    {% for order_item in order.order_items %}
 
      <!-- 商品名 -->
      {{ order_item.name_with_tax }}
 
      <!-- 単価 (税抜)  -->
      {{ order_item.price | number_to_currency: format: '%n %u' }}
 
      <!-- 数量 -->
      {{ order_item.quantity }}
 
      <!-- 小計 (税抜) -->
      {{ order_item.subtotal_price | number_to_currency: format: '%n %u' }}
 
    {% endfor %}
 
    <!-- 注文小計 -->
    {{ order.subtotal | number_to_currency: format: '%n %u' }}
 
    <!-- 8%対象小計 -->
    {% if order.subtotal8 != 0 %}
      {{ order.subtotal8 | number_to_currency: format: '%n %u' }}
    {% endif %}
 
    <!-- 10%対象小計 -->
    {% if order.subtotal10 != 0 %}
      {{ order.subtotal10 | number_to_currency: format: '%n %u' }}
    {% endif %}
 
    <!-- 割引 -->
    {% if order.discount_not_with_point != 0 %}
      - {{ order.discount_not_with_point | number_to_currency: format: '%n %u' }}
    {% endif %}
 
    <!-- 8%対象割引 -->
    {% if order.discount8 != 0 %}
      - {{ order.discount8 | number_to_currency: format: '%n %u' }}
    {% endif %}
 
    <!-- 10%対象割引 -->
    {% if order.discount10 != 0 %}
      - {{ order.discount10 | number_to_currency: format: '%n %u' }}
    {% endif %}
 
    <!-- ポイント利用(税率適用前) -->
    {% if order.discount_point_amount != 0 and order.use_point_include_tax? == false %}
      - {{ order.discount_point_amount | number_to_currency: format: '%n %u' }}
    {% endif %}
 
    <!-- ラッピング代 -->
    {% if shop_form_settings['wrapping'] %}
      {{ order.misc_fee | number_to_currency: format: '%n %u' }}
    {% endif %}
 
    <!-- 送料 -->
    {{ order.deliv_fee | number_to_currency: format: '%n %u' }}
 
    <!-- 手数料 -->
    {{ order.charge | number_to_currency: format: '%n %u' }}
 
    <!-- 消費税 -->
    {{ order.tax | number_to_currency: format: '%n %u' }}
 
    <!-- 8%対象消費税 -->
    {% if order.tax8 != 0 %}
      {{ order.tax8 | number_to_currency: format: '%n %u' }}
    {% endif %}
 
    <!-- 10%対象消費税 -->
    {% if order.tax10 != 0 %}
      {{ order.tax10 | number_to_currency: format: '%n %u' }}
    {% endif %}
 
    <!-- ポイント利用(税率適用後) -->
    {% if order.discount_point_amount != 0 and order.use_point_include_tax? == true %}
      - {{ order.discount_point_amount | number_to_currency: format: '%n %u' }}
    {% endif %}
 
    <!-- 合計 -->
    {{ order.total | number_to_currency: format: '%n %u' }}
 
    <!-- 付与予定ポイント(任意) -->
    {% if base_info.use_point? and customer_signed_in %}
      {% if order.grant_plan_campaign_point == 0 %}
        {{ order.grant_plan_point }}
      {% else %}
        {{ order.grant_plan_point }}
        {{ order.grant_plan_general_point }}
        {{ order.grant_plan_campaign_point }}
      {% endif %}
    {% endif %}
 
    <!-- 注意喚起文 -->
    {% for order_item in order.order_items %}
      {% unless order_item.variant.product.caution == blank %}
        {{ order_item.variant.product.caution }}
      {% endunless %}
    {% endfor %}
 
    <!-- 税率の印の説明 -->
    {% for symbol_text in order.tax_symbol_texts %}
      {{ symbol_text }}
    {% endfor %}
 
 
  <!-- ギフト設定情報 -->
  {% if gift_order_items.size > 0 %}
    {% for gift_oi in gift_order_items %}
      {% for gift_relation in gift_oi.gift_target_relations %}
        {% if forloop.index0 == 0 %}
          <!-- ギフト商品名 -->
          {{ gift_oi.name_with_tax_and_option_values_presentation }}
        {% endif %}
 
        <!-- ギフト対象商品名 -->
        {{ gift_relation.variant.name_with_option_values_presentation }}
 
        {% if gift_oi.gift.noshi? %}
          <!-- 表書き -->
          {% if gift_relation.description_part_of_noshi != blank %}
            {{ gift_relation.description_part_of_noshi }}
          {% endif %}
 
          <!-- 名入れ -->
          {% if gift_relation.name_part_of_noshi != blank %}
            {{ gift_relation.name_part_of_noshi | escape }}
          {% endif %}
        {% endif %}
 
        <!-- ギフト商品個数 -->
        {{ gift_relation.gift_quantity }}
      {% endfor %}
    {% endfor %}
  {% endif %}
 
 
  <!-- お客様情報 -->
 
    <!-- お名前 -->
    {{ order.billing_address.full_name }}
 
    <!-- フリガナ -->
    {{ order.billing_address.full_kana }}
 
    <!-- 住所 -->
    {{ order.billing_address.full_address }}
 
    <!-- 電話番号 -->
    {{ order.billing_address.full_tel }}
 
    <!-- メールアドレス -->
    {% if shop_form_settings['email'] %}
      {{ order.email }}
    {% endif %}
 
    <!-- ショップからのお知らせ -->
    {% if order.customer.optin %}受け取る{% else %}受け取らない{% endif %}
 
  <!-- 受取店舗情報 -->
  {% if order.pickup_store != blank %}
 
    <!-- 店舗名 -->
    {{ order.pickup_store.name }}
 
    <!-- フリガナ -->
    {{ order.pickup_store.kana }}
 
    <!-- 住所 -->
    {{ order.pickup_store.full_address }}
 
    <!-- 電話番号 -->
    {{ order.pickup_store.full_tel }}
 
    <!-- FAX番号 -->
    {{ order.pickup_store.full_fax }}
 
    <!-- 営業時間 -->
    {{ order.pickup_store.business_hours }}
 
  {% else %}
 
    <!-- 複数のお届け先がある場合のお届け先情報 -->
    {% if order.multiple_shipping? %}
 
      {% for shipping_address in order.shipping_addresses %}
 
        <!-- お名前 -->
        {{ shipping_address.full_name }}
 
        <!-- フリガナ -->
        {{ shipping_address.full_kana }}
 
        <!-- 住所 -->
        {{ shipping_address.full_address }}
 
        <!-- 電話番号 -->
        {{ shipping_address.full_tel }}
 
        <!-- お届け先登録 -->
        {% assign address_registered = order.id | already_registered: shipping_address.id %}
        {% unless address_registered %}
          {% if shipping_address.persist_as_customer_shipping_address %}する{% else %}しない{% endif %}
        {% endunless %}
 
        <!-- 商品情報 -->
        {% 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 %}
 
        <!-- 配送業者 -->
        {{ shipping_address.shipping_carrier.name }}
      {% endfor %}
 
    <!-- お届け先情報 -->
    {% else %}
 
      <!-- お名前 -->
      {{ order.shipping_address.full_name }}
 
      <!-- フリガナ -->
      {{ order.shipping_address.full_kana }}
 
      <!-- 住所 -->
      {{ order.shipping_address.full_address }}
 
      <!-- 電話番号 -->
      {{ order.shipping_address.full_tel}}
 
    {% endif %}
 
  {% endif %}
 
  <!-- ラッピング -->
  {% if shop_form_settings['wrapping'] %}
    {% if order.wrapping %}
 
      <!-- ラッピング名 -->
      {{ order.wrapping.name }}
 
      <!-- ラッピング画像 -->
      <img src="{{ order.wrapping.thumbnail.url.medium }}">
 
    {% else %}
      無し
    {% endif %}
 
  {% endif %}
 
 
  <!-- 配送業者名 -->
  {% if order.pickup_store == blank and order.multiple_shipping? == false %}
    {{ order.shipping_carrier.name }}
  {% endif %}
 
 
  <!-- お支払い情報 -->
 
    <!-- 支払い方法名 -->
    {{ order.payment.payment_method.name }}
 
    <!-- クレジットカード一括 -->
    {% if order.payment.payment_method.one_time_payment? %}
 
      <!-- カード番号(有効期限) -->
      {{ order.payment.source.display_number }}
 
      <!-- カード名義 -->
      {{ order.payment.source.name }}
 
    <!-- クレジットカード分割 -->
    {% elsif order.payment.payment_method.installment_payment? %}
 
      <!-- お支払い回数 -->
      {{ order.payment.payment_times }} 回
 
      <!-- カード番号(有効期限) -->
      {{ order.payment.source.display_number }}
 
      <!-- カード名義 -->
      {{ order.payment.source.name }} 
 
    <!-- クレジットカードリボ -->
    {% elsif order.payment.payment_method.revolving_payment? %}
 
      <!-- カード番号(有効期限) -->
      {{ order.payment.source.display_number }}
 
      <!-- カード名義 -->
      {{ order.payment.source.name }}
 
    {% endif %}
 
 
  <!-- お届けサイクル -->
  {% if scheduled_delivery_dates_visibility %}
 
    {% if enabled_pre_order and order.pre_order_variants? %}
      <!-- お届け予定時期 -->
      {{ order.find_last_scheduled_pre_order.pre_ordered_delivery_description }}
      {% if order.scheduled_delivery_time != empty %}
        ({{ order.scheduled_delivery_time }})
      {% endif %}
    {% else %}
      <!-- 1回目お届け日 -->
      {% if order.scheduled_to_be_delivered_at %}
        {{ order.scheduled_to_be_delivered_at | date: '%Y-%m-%d' }}
      {% else %}
        指定なし
      {% endif %}
 
      <!-- 1回目お届け時間 -->
      {% if order.scheduled_delivery_time != empty %}
        {{ order.scheduled_delivery_time }}
      {% endif %}
 
      <!-- 2回目お届け日 -->
      {% if order.subs_order.scheduled_to_be_delivered_at %}
        {{ order.subs_order.scheduled_to_be_delivered_at | date: '%Y-%m-%d' }}
      {% else %}
        --
      {% endif %}
    {% endif %}
  {% endif %}
 
  <!-- 通信欄 -->
  {% if shop_form_settings['remark'] %}
    {{ order.remark }}
  {% endif %}
 
  <!-- カスタム項目 -->
  {% if base_info.use_free_columns? and shop_form_settings['free_column'] and liquid_custom_field != empty %}
    {% assign setting = shop_form_settings['free_column_title'] %}
    <!-- カスタム項目タイトル名 -->
    {{ setting }}
    {% for custom_field_info_hash in liquid_custom_field %}
      {% for seq_hash in custom_field_info_hash[1] %}
        {% assign info = seq_hash[1] %}
        <!-- カテゴリ名 -->
        {% if info['category'] %}
          {{ info['category'] | escape }}
        {% endif %}
        {% for i_hash in info['info'] %}
          {% assign i = i_hash[1] %}
          <div>
            <!-- 項目名 -->
            {{ i['label'] | escape }}
            <!-- 入力、選択値 -->
            {% for v in i['value'] %}
              {{ v | escape }}
            {% endfor %}
          </div>
        {% endfor %}
      {% endfor %}
    {% endfor %}
  {% endif %}
  
  <!-- 注文リンク -->
  <form action='/shop/order/confirm' method='post' accept-charset="UTF-8">
    <input name="_method" type="hidden" value="put">
    {% if guest_flag and customer_signed_in != true %}
      <a class='btn btn-sm btn-default' href="/shop/order?register_as_member=1">入力内容を修正する</a>
    {% else %}
      <a class='btn btn-sm btn-default' href="/shop/order">入力内容を修正する</a>
    {% endif %}
    {% if order.multiple_shipping? %}
      {% for shipping_address in order.shipping_addresses %}
        <input type="hidden" name="order[persist_as_customer_shipping_addresses_attributes][{{ forloop.index0 }}][id]" value="{{ shipping_address.id }}">
        <input type="hidden" name="order[persist_as_customer_shipping_addresses_attributes][{{ forloop.index0 }}][persist_as_customer_shipping_address]" value="{% if shipping_address.persist_as_customer_shipping_address %}1{% else %}0{% endif %}">
      {% endfor %}
    {% endif %}
    <button type='submit'>ご注文完了へ</button>
  </form>
 
</div>
 

画面イメージ

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