cart_modal (shared_partial)
全画面で共通利用する shared_partial です。
カートモーダル機能について
カートモーダル機能を利用するためには「ショップ管理 > 各種設定 > ショップの機能設定 (opens in a new tab)」で「カートモーダル機能」を有効に設定します。
また、カートモーダルが利用できる画面は限られています。
詳細はFAQ(ショップの機能設定 (opens in a new tab))をご確認ください。
テーマ管理のファイルパス
ec_force/shop/shared/_cart_modal.html.liquid
ec_force/shop/shared/_cart_modal.html+smartphone.liquid
必要なコンポーネント
※任意とあるもの以外はシステム上必要なコンポーネントとなりますので、必ず使用するようにしてください。
<!-- id:cart-modal-view 必須になります -->
<div id="cart-modal-view">
{% if base_info.use_cart and base_info.use_cart_modal? %}
<!-- id:cart-modal 必須になります -->
<div id="cart-modal" class="default-hide">
<div class="modal cart-modal-position">
<div class="modal-header">
<!-- class:close 必須になります -->
<button class="close"> ×</button>
<div class="modal-title">
カートに入っている商品({% if current_order %}{{ current_order.quantity }}{% else %}{{ order.quantity }}{% endif %}点)
{% if customer_signed_in %}
<a href="/shop/order/new" class="btn btn-sm btn-danger">ご購入手続きへ</a>
{% else %}
<a href="/shop/cart" class="btn btn-sm btn-warning">カートからご購入へ</a>
{% endif %}
</div>
</div>
<div class="modal-body">
<!-- メッセージ関連 -->
<!-- id:cart-modal-success、cart-modal-success-message、cart-modal-failure、cart-modal-failure-message 必須になります -->
<div id="cart-modal-success" class="default-hide">
<div id="cart-modal-success-message"></div>
</div>
<div id="cart-modal-failure" class="default-hide">
<div id="cart-modal-failure-message"></div>
</div>
<!-- カート内に商品がない場合 -->
{% if order.order_items.size == 0 %}
現在、カートに商品はありません。
{% else %}
<!-- カート内商品一覧 -->
{% for order_item in order.order_items %}
<!-- 商品画像(任意) -->
{% if order_item.available_thumbnail %}
{% assign src = order_item.available_thumbnail %}
{% else %}
{% assign src = 'missing' | image_url %}
{% endif %}
<img src="{{ src }}">
<!-- 商品名(任意) -->
{% if order_item.product.gift? %}
{{ order_item.product.name }}
{% else %}
<a href="/shop/products/{{ order_item.product.master.sku }}">{{ order_item.product.name }}</a>
{% endif %}
<!-- 商品バッジ(任意) -->
{% if pre_order_badge_flg_cart_modal_hash[order_item.variant.id] or delivery_group_badge_flg_cart_modal_hash[order_item.product.id] or concurrent_purchase_group_badge_flg_cart_modal_hash[order_item.product.id] or campaign_badge_flg_cart_modal_hash[order_item.product.id] %}
<!-- 商品予約マーク(任意) -->
{% if pre_order_badge_flg_cart_modal_hash[order_item.variant.id] %}
予約商品
{% endif %}
<!-- 配送温度帯ラベル(任意) -->
{% for delivery_group_name in order_item.product.delivery_group_names %}
{{ delivery_group_name }}
{% endfor %}
<!-- 同時購入グループバッジ(任意) -->
<!-- 「バッジ表示名」を表示したい場合、order_item.product.concurrent_purchase_group_names を order_item.product.concurrent_purchase_badge_names に修正してください。 -->
{% for concurrent_purchase_group_name in order_item.product.concurrent_purchase_group_names %}
{{ concurrent_purchase_group_name }}
{% endfor %}
<!-- キャンペーンバッジ(任意) -->
{% assign badges = campaign_badge_flg_cart_modal_hash[order_item.product.id] | liquid_render_badges %}
{% for render_badge in badges %}
{{ render_badge | hash: 'value' }}
{% endfor %}
{% endif %}
<!-- 規格(任意) -->
{% for option_value in order_item.variant.option_values %}
{{ option_value.option_type.presentation }}: {{ option_value.presentation }}
{% endfor %}
<!-- 単価(任意) -->
{{ order_item.price_with_campaign_discount | number_to_currency: format: '%n %u' }}
<!-- 小計(任意) -->
{{ order_item.subtotal_with_campaign_discount | number_to_currency: format: '%n %u' }}
<!-- 数量 -->
{% if order_item.set? or order_item.set_item_quantity != 0 or order_item.product.distribution_club or order_item.distribution_item_quantity != 0 %}
{{ order_item.quantity }}個
{% else %}
<!-- id:select-quantity-id-、class:cart-modal-quantity は必須になります -->
<select id="select-quantity-id-{{order_item.variant_id}}" class="cart-modal-quantity">
<!-- 購入個数制限を考慮 -->
{% if order_item.variant.limit_quantity? %}
{% assign min_quantity = order_item.variant.min_quantity %}
{% assign max_quantity = order_item.variant.max_quantity %}
{% else %}
{% assign min_quantity = 1 %}
{% assign max_quantity = 10 %}
{% endif %}
{% for q in (min_quantity..max_quantity) %}
<option value='{{ q }}' {% if order_item.quantity == q %}selected{% endif %}>{{ q }} 個</option>
{% endfor %}
</select>
{% endif %}
<!-- 削除 -->
{% if order_item.set_item_quantity == 0 and order_item.distribution_item_quantity == 0 %}
<!-- class:cart-modal-delete は必須になります -->
<button class="cart-modal-delete" value="{{ order_item.variant_id }}">削除</button>
{% endif %}
{% endfor %}
{% endif %}
<!-- カート内の小計(任意) -->
{{ order.subtotal_with_campaign_discount | number_to_currency: format: '%n %u' }}
<!-- カート内の合計(任意) -->
{{ order.subtotal_with_campaign_discount | number_to_currency: format: '%n %u' }}
上記価格は税抜き価格です。次以降の画面で別途消費税が加算されます
</div>
</div>
<div class="modal-backdrop cart-modal-backdrop fade in"></div>
</div>
{% endif %}
</div>