テーマ仕様書
shop
部分テンプレート(shared_partial)
cart_modal★

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"> &times;</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>