テーマ仕様書
shop
カート画面
カート画面

カート画面

カートの中身を確認できるページです。
以下項目を変数で取得できます。

  • 商品画像
  • 商品名
  • 規格
  • 数量
  • 単価 (税抜)
  • 小計 (税抜)
  • 商品合計 (税抜)
  • カート画面時点の消費税額(消費税合計・10%対象・8%対象)
  • カート画面時点の合計(税込)

請求金額確定タイミングの仕様について

ecforceは確認画面遷移時に「送料」「手数料」「ラッピング代」「割引」が決定する仕様です。
カート画面では請求金額は未確定です。

未ログイン時にログインフォームや会員登録フォームを表示できます。
なお遷移先は注文情報入力画面です。

ショップのパス

ドメイン/shop/cart

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

ec_force/shop/carts/show.html.liquid
ec_force/shop/carts/show.html+smartphone.liquid

JS タグ

{{ 'shop/carts' | javascript_include_tag }}

必要なコンポーネント

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

{{ 'shop/carts' | javascript_include_tag }}
 
<!-- カート画面コンテナ -->
<div id="cart-show-view">
 
  <!-- フラッシュメッセージ -->
  {{ 'notice' | flash: 'alert alert-success', 'text' }}
  {{ 'alert' | flash: 'alert alert-danger', 'text' }}
  {{ 'error' | flash: 'alert alert-danger', 'text' }}
  {{ 'order_errors' | flash: 'alert alert-danger', 'text' }}
 
  <!-- ギフト商品の個数がギフト対象商品の個数より少ない場合の通知メッセージ -->
  {% if gift_alert_list.size > 0 %}
    ※個数をご確認ください
    {% for alert in gift_alert_list %}
      {{ alert }}
    {% endfor %}
  {% endif %}
 
  <!-- キャンペーンまとめ買い割引が有効の場合 -->
  <!-- まとめ買い割引条件を満たしたキャンペーンが存在する場合 -->
  {% if campaign %}
    {{ campaign.name }}
    対象商品が{{ campaign.campaign_benefit | campaign_discount_type }}割引されます
  {% endif %}
 
  <!-- まとめ買い割引条件を満たしていないキャンペーンが存在する場合 -->
  {% for campaign_info in ineligible_discount_quantity_campaigns_info_for_liquid %}
    {% assign campaign_name = campaign_info[0] %}
    {% assign campaign_required_quantity = campaign_info[1] %}
    {% assign campaign_discount_rate = campaign_info[2] %}
    {{ campaign_name }}
    対象商品をあと{{ campaign_required_quantity }}個購入で{{ campaign_discount_rate }}割引!
  {% endfor %}
 
  <!-- カート内に商品がない場合 -->
  {% if order.order_items.size == 0 %}
    現在、カートに商品はありません。
    <a href="/shop">トップへ戻る</a>
 
  <!-- カート内に商品がある場合 -->
  {% else %}
  
    <!-- カート内に予約商品が含まれる場合の注意文 -->
    {% if enabled_pre_order and order.pre_order_variants? and pre_order_settings.message_when_pre_order_product_in_cart != '' %}
      {{ pre_order_settings.message_when_pre_order_product_in_cart }}
    {% endif %}
 
    <!-- カート内商品一覧 -->
    {% for order_item in order_items %}
 
      <!-- 商品画像(任意) -->
      {% if order_item.available_thumbnail %}
        {% assign src = order_item.available_thumbnail %}
      {% else %}
        {% assign src = 'missing' | image_url %}
      {% endif %}
      <img src="{{ src }}">
 
      <!-- 商品名 -->
      <a href="/shop/products/{{ order_item.product.master.sku }}">{{ order_item.product.name }}</a>
      
      <!-- カート内商品バッジ(任意) -->
      {% if pre_order_badge_flg_hash[order_item.variant.id] or delivery_group_badge_flg_hash[order_item.product.id] or concurrent_purchase_group_badge_flg_hash[order_item.product.id] or campaign_badge_flg_hash[order_item.product.id] %}
        <!-- 商品予約マーク(任意) -->
        {% if pre_order_badge_flg_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_hash[order_item.product.id] | liquid_render_badges %}
        {% for render_badge in badges %}
          {{ render_badge | hash: 'value' }}
        {% endfor %}
      {% endif %}
 
      <!-- 規格 -->
      {{ order_item.variant.option_values_presentation }}
 
      <!-- 数量 -->
      <form action="/shop/cart" method="post">
        <input name="_method" type="hidden" value="put">
        <input name="variant_id" type="hidden" value="{{ order_item.variant_id }}">
 
        {% if order_item.set? or order_item.set_item_quantity != 0 or order_item.product.distribution_club or order_item.distribution_item_quantity != 0 %}
          <span>  {{ order_item.quantity }}個 </span>
        {% else %}
          <select name="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>
 
          <input type="submit" value="更新">
        {% endif %}
 
        {% if order_item.set_item_quantity == 0 and order_item.distribution_item_quantity == 0 %}
          <a rel="nofollow" data-method="delete" href="/shop/cart/delete?variant_id={{ order_item.variant_id }}">削除</a>
        {% endif %}
      </form>
 
      <!-- 単価 -->
      {{ 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? %}
        <a href="/shop/sets/{{ order_item.variant.product.set.id }}">セット商品を選び直す</a>
      {% endif %}
    {% 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 %}
            <!-- ギフト商品画像 -->
            {% if gift_oi.available_thumbnail %}
              {% assign src = gift_oi.available_thumbnail %}
            {% else %}
              {% assign src = 'missing' | image_url %}
            {% endif %}
            <img src="{{ src }}" />
 
            <!-- ギフト商品名 -->
            {{ gift_oi.variant.name }}
 
            <!-- ギフト商品規格 -->
            {{ gift_oi.variant.option_values_presentation }}
 
            <!-- ギフト商品個数 -->
            {{ gift_oi.quantity }}個
 
            <!-- ギフト商品単価 -->
            {{ gift_oi.price_with_campaign_discount | number_to_currency }}
 
            <!-- ギフト商品小計 -->
            {{ gift_oi.subtotal_with_campaign_discount | number_to_currency }}
          {% endif %}
 
          <!-- ギフト対象商品 -->
          {{ gift_relation.variant.name }}
 
          {% if gift_oi.variant.gift.noshi? == true %}
            <!-- 表書き -->
            {% if gift_relation.description_part_of_noshi != blank %}
              {{ gift_relation.description_part_of_noshi }}
            {% endif %}
 
            <form action="/shop/cart/update_gift_relation" method="post">
              <input type="hidden" name="_method" value="put">
              <input type="hidden" name="variant_id" value="{{ gift_oi.variant_id }}">
              <input type="hidden" name="gift_relation[id]" value="{{ gift_relation.id }}">
 
              <!-- 名入れ 入力欄 -->
              <input type="text" name="gift_relation[name_part_of_noshi]" value="{{ gift_relation.name_part_of_noshi | escape }}">
 
              <!-- 名入れ 更新ボタン -->
              <input type="submit" value="更新">
            </form>
          {% endif %}
 
          <!-- ギフト対象商品規格 -->
          {{ gift_relation.variant.option_values_presentation }}
 
          <form action="/shop/cart/update_gift_relation" method="post">
            <input type="hidden" name="_method" value="put">
            <input type="hidden" name="variant_id" value="{{ gift_oi.variant_id }}">
            <input type="hidden" name="gift_relation[id]" value="{{ gift_relation.id }}">
 
            <!-- ギフト個数 -->
            <select name="gift_relation[gift_quantity]">
              {% for i in (1..gift_relation.order_item.quantity) %}
                <option value="{{ i }}" {% if gift_relation.gift_quantity == i %}selected{% endif %}>{{ i }} 個</option>
              {% endfor %}
            </select>
 
            <!-- ギフト個数更新ボタン -->
            <input type="submit" value="更新">
 
            <!-- ギフト削除ボタン -->
            <a data-method="put" href="/shop/cart/delete_gift_relation?variant_id={{gift_oi.variant_id}}&gift_relation[id]={{ gift_relation.id }}&gift_relation[gift_quantity]={{ gift_relation.gift_quantity }}">削除</a>
          </form>
        {% endfor %}
      {% endfor %}
    {% endif %}
 
    <!-- カート内の小計 -->
    {{ order.subtotal_with_campaign_discount | number_to_currency: format: '%n %u' }}
    
    <!-- カート時点の消費税(任意) ※カート内商品に対する消費税額 -->
    {{ order.subtotal_tax_with_campaign_discount | number_to_currency: format: '%n %u' }}
 
    <!-- カート時点の8%消費税(任意) ※カート内商品(税率8%)に対する消費税額 -->
    {{ order.subtotal8_tax_with_campaign_discount | number_to_currency: format: '%n %u' }}
  
    <!-- カート時点の10%消費税(任意) ※カート内商品(税率10%)に対する消費税額 -->
    {{ order.subtotal10_tax_with_campaign_discount | number_to_currency: format: '%n %u' }}
 
    <!-- カート時点の合計(任意) ※ order.subtotal_with_campaign_discount + order.subtotal_tax_with_campaign_discount -->
    {{ order.subtotal_include_tax_with_campaign_discount | number_to_currency: format: '%n %u' }}
    
    <!-- 関連商品 -->
    {% if base_info.use_related_products_on_cart? and order.related_products.size != 0 %}
 
      <!-- 関連商品一覧 -->
      {% for related_product in order.related_products %}
 
        <!-- 関連商品画像 -->
        <a href="/shop/products/{{ related_product.master.sku }}">
          {% if related_product.thumbnail.url %}
            {% assign src = related_product.thumbnail.url %}
          {% else %}
            {% assign src = 'missing' | image_url %}
          {% endif %}
          <img src="{{ src }}">
        </a>
 
        <!-- 関連商品名 -->
        <a href="/shop/products/{{ related_product.master.sku }}">{{ related_product.name | truncate: 35 }}</a>
        
        <!-- 関連商品バッジ(任意) -->
        {% if pre_order_badge_flg_hash[related_product.master.id] or delivery_group_badge_flg_hash[related_product.id] or concurrent_purchase_group_badge_flg_hash[related_product.id] or campaign_badge_flg_hash_without_cart[related_product.id] %}
          <!-- 商品予約マーク(任意) -->
          {% if pre_order_badge_flg_hash[related_product.master.id] %}
            予約商品
          {% endif %}
          <!-- 配送温度帯ラベル(任意) -->
          {% for delivery_group_name in related_product.delivery_group_names %}
            {{ delivery_group_name }}
          {% endfor %}
          <!-- 同時購入グループバッジ(任意) -->
          <!-- 「バッジ表示名」を表示したい場合、related_product.concurrent_purchase_group_names を related_product.concurrent_purchase_badge_names に修正してください。 -->
          {% for concurrent_purchase_group_name in related_product.concurrent_purchase_group_names %}
            {{ concurrent_purchase_group_name }}
          {% endfor %}
          <!-- キャンペーンバッジ(任意) -->
          {% assign badges = campaign_badge_flg_hash_without_cart[related_product.id] | liquid_render_badges %}
          {% for render_badge in badges %}
            {{ render_badge | hash: 'value' }}
          {% endfor %}
        {% endif %}
 
        <!-- 販売価格 -->
        {{ related_product.first_price | number_to_currency: format: '%n %u' }}
 
        <!-- 関連商品カート追加ボタン -->
        <form action="/shop/cart/add" method="post">
          <input name="variant_id" type="hidden" value="{{ related_product.related_product_variants_id }}">
          <button>カートに追加する</button>
        </form>
 
      {% endfor %}
 
    {% endif %}
 
    {% unless auth_infra and auth_infra.login_only_auth_infra == true %}
      {% if line_settings['display_btn'] == '1' %}
        {% if customer_signed_in == false and encrypted_line_id == nil %}
          <!-- LINE ID 説明ポップアップ -->
          {{ line_settings['information_context'] }}
          <!-- LINE ID 連携ボタン(クラス) -->
          <a class="line-token-set-btn" href="#">LINEでログイン</a>
        {% elsif customer_signed_in == true and current_customer.line_id? == false %}
          <!-- LINE ID 説明ポップアップ -->
          {{ line_settings['information_context'] }}
          <!-- LINE ID 連携ボタン(クラス) -->
          <a class="line-token-set-btn" href="#">LINE ID 連携</a>
        {% endif %}
      {% endif %}
    {% endunless %}
 
    <!-- 認証基盤でのログインボタン -->
    {% if auth_infra and auth_infra_regist == nil %}
      {% unless customer_signed_in %}
        <a class="auth-infra-token-set-btn" href="#">認証基盤でログイン</a>
      {% endunless %}
    {% endif %}
 
    <!-- 任意記述 -->
    上記価格は税抜き価格です。次以降の画面で別途消費税が加算されます。
 
    <!-- (PCの場合)ギフト商品一覧 -->
    {% include 'ec_force/shop/carts/view_gift.html' %}
    
    <!-- (SPの場合)ギフト商品一覧 -->
    {% include 'ec_force/shop/carts/view_gift.html+smartphone' %}
 
    <!-- ショップに戻るリンク(任意) -->
    <a href="/shop">お買い物を続ける</a>
    {% if customer_signed_in %}
      <!-- 購入リンク -->
      <a href="/shop/order/new">ご購入手続きへ</a>
    {% else %}
      <!-- ログインフォーム -->
      {% unless auth_infra and auth_infra.login_only_auth_infra == true %}
        <form action="/shop/customers/sign_in?customer_return_to=%2Fshop%2Forder%2Fnew" id="new_customer" method="post">
 
          <input type="email" class="validate[required,custom[email]]" id="customer_email" name="customer[email]" placeholder="メールアドレス" value="{{ line_email }}">
 
          <input type="password" class="validate[required,minSize[8]]" id="customer_password" name="customer[password]" placeholder="パスワード">
 
          <input type="hidden" name="sign_in_route" value="shop_cart">
 
          <input type="submit" value="ログイン">
        </form>
 
        <!-- 会員登録と同時の購入リンク -->
        <a href="/shop/order/new?register_as_member=1">会員登録して購入手続きへ進む</a>
 
        <!-- ゲスト用購入リンク -->
        <a href="/shop/order/new?register_as_member=0">会員登録せずに購入手続きへ進む</a>
      {% endunless %}
    {% endif %}
 
  {% endif %}
 
  <!-- 閲覧履歴(任意) -->
  {% if current_customer != null %}
    {% for browsing_history in browsing_histories %}
      <!-- 商品画像(任意) -->
      <a href="/shop/products/{{ browsing_history.master.sku }}">
        {% if browsing_history.thumbnail.url %}
          {% assign src = browsing_history.thumbnail.url %}
        {% else %}
          {% assign src = 'missing' | image_url %}
        {% endif %}
        <img src="{{ src }}">
      </a>
 
      <!-- 商品名 -->
      <a href="/shop/products/{{ browsing_history.master.sku }}">{{ browsing_history.name }}</a>
 
      <!-- 閲覧履歴商品バッジ(任意) -->
      {% if pre_order_badge_flg_hash[browsing_history.master.id] or delivery_group_badge_flg_hash[browsing_history.id] or concurrent_purchase_group_badge_flg_hash[browsing_history.id] or campaign_badge_flg_hash_without_cart[browsing_history.id] %}
        <!-- 商品予約マーク(任意) -->
        {% if pre_order_badge_flg_hash[browsing_history.master.id] %}
          予約商品
        {% endif %}
        <!-- 配送温度帯ラベル(任意) -->
        {% for delivery_group_name in browsing_history.delivery_group_names %}
          {{ delivery_group_name }}
        {% endfor %}
        <!-- 同時購入グループバッジ(任意) -->
        <!-- 「バッジ表示名」を表示したい場合、browsing_history.concurrent_purchase_group_names を browsing_history.concurrent_purchase_badge_names に修正してください。 -->
        {% for concurrent_purchase_group_name in browsing_history.concurrent_purchase_group_names %}
          {{ concurrent_purchase_group_name }}
        {% endfor %}
        <!-- キャンペーンバッジ(任意) -->
        {% assign badges = campaign_badge_flg_hash_without_cart[browsing_history.id] | liquid_render_badges %}
        {% for render_badge in badges %}
          {{ render_badge | hash: 'value' }}
        {% endfor %}
      {% endif %}
 
      <!-- 販売価格(任意) -->
      {{ browsing_history.first_price | number_to_currency: format: '%n %u' }}
    {% endfor %}
  {% endif %}
 
</div>

画面イメージ

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