注文情報確認画面
注文確定前、購入商品情報や金額、お客様情報など購入に関する情報を確認するページです。
以下の項目を変数で取得できます。
- 注文商品情報
- 商品名
- 単価 (税抜)
- 個数
- 小計 (税抜)
- 注文小計
- 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であてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。