🛒 カート/チェックアウト中級

カートドロワー

ページ右側からスライドインするオフキャンバスカートドロワー。商品一覧、メモ機能、フッター情報を1つのコンテナで管理し、アップセル機能にも対応する。

用途

ヘッダーのカートアイコンをクリックしたときに、商品内容と会計情報を画面を閉じずに確認・編集したいシーン。モバイル対応の軽量なカート確認機構として機能する。

設置場所

snippets/offcanvas-cart.liquid に配置し、theme.liquid または layout セクション内で `{% render 'offcanvas-cart' %}` で呼び出す。ヘッダーのカートボタンに `data-bs-toggle="offcanvas"` と `data-bs-target="#offcanvas-cart"` 属性を付けて連動させる。

注意点

Bootstrap の offcanvas コンポーネントに依存しているため、テーマに Bootstrap CSS と JavaScript が読み込まれている前提。`cart-container` カスタム要素は JavaScript で Ajax 処理（商品削除・数量更新）を扱うため、対応する JS ファイルを別途作成する必要がある。`settings.cart_upsells_enable` が有効なとき、`cart-upsells` 機能を提供する JavaScript を組み込まないとエラーになる可能性がある。

タグ:cartoffcanvasdrawerajaxbootstrap

コード

32 行 / liquid

<div
  id="offcanvas-cart"
  class="offcanvas-cart offcanvas offcanvas-end" 
  tabindex="-1" 
  aria-labelledby="offcanvas-cart-label"
  {% if settings.cart_upsells_enable %}data-cart-upsells{% endif %}
>
  <cart-container class="cart-container">
    <div class="offcanvas-header">
      <h2 id="offcanvas-cart-label" class="offcanvas-title">
        {{ 'cart.title' | t }}
      </h2>
      <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="{{ 'general.accessibility.close' | t }}">
        {% render 'svg-icons', icon: 'x' %}
      </button>
    </div>
    <div class="offcanvas-body">
      <div id="cart-alert" class="cart-alert alert alert-danger small px-4 py-3" role="alert" hidden>
        <div class="alert-icon me-4 flex-shrink-0">
          {% render 'svg-icons', icon: 'alert-circle', size: 18 %}
        </div>
        <p class="mb-0" data-alert-msg></p>
      </div>
      {% liquid 
        render 'cart-items' 
        render 'cart-note'
      %}
    </div>
    {% render 'cart-footer' %}
  </cart-container>
</div>

出典・ライセンス

Source:: kondasoft/ks-bootshop/snippets/offcanvas-cart.liquid
Repository:: https://github.com/kondasoft/ks-bootshop
License:: MIT

このコードは kondasoft 著作の MIT ライセンスソースです。原本の著作権は kondasoft が保有します。日本語訳は ALSEL によるものです。

カートドロワー

コード

出典・ライセンス

関連項目

カートドロワー

カート件数バッジ

カート注文備考欄

カートフッターの割引・小計・チェックアウト

カートページの商品一覧

カート内の商品一覧