🛒 カート/チェックアウト中級
カートドロワー
Shopify の Bundled Section Rendering に対応したカートドロワーセクション。カート更新時に動的にフェッチされ、AJAX で自動的に再レンダリングされる。
用途
ヘッダーの「カート」ボタンをクリックしたときに画面横からカートの内容をスライドイン表示するドロワーメニュー。テーマの theme.liquid から呼び出される。
設置場所
sections/offcanvas-cart.liquid に配置。theme.liquid のヘッダー内で `{% section 'offcanvas-cart' %}` で呼び出すか、または管理画面のテーマカスタマイザーでセクションとして追加する。
注意点
このセクション自体は render 呼び出しのみで、実装の本体は snippets/offcanvas-cart.liquid に記述する必要がある。Bundled Section Rendering はカート API が Shopify AJAX エンドポイントで正しく応答することが前提で、theme.liquid の <body> 要素に `data-shopify-api-token` 属性がない場合は動的フェッチが機能しない。またドロワーの開閉アニメーション（CSS トランジション）や背景オーバーレイのクリック判定も別途 snippet / CSS で実装する必要がある。
コード
6 行 / liquid{% liquid
# This section is needed to dynamically fetch it using Shopify's
# "Bundled section rendering" mode after the cart has been updated.
# https://shopify.dev/docs/api/ajax/reference/cart#bundled-section-rendering
%}
{% render 'offcanvas-cart' %}出典・ライセンス
- Repository:
- https://github.com/kondasoft/ks-bootshop
- License:
- MIT
このコードは kondasoft 著作の MIT ライセンスソースです。 原本の著作権は kondasoft が保有します。日本語訳は ALSEL によるものです。
関連項目
🛒 カート/チェックアウト中級
カート件数バッジ
カート内の商品件数を表示するバッジを、Shopify の Bundled section rendering 機能で動的に更新する。カート更新時に AJAX で再レンダリングされ、常に最新の件数を表示。
📁 ks-bootshop·MIT·6 行
🛒 カート/チェックアウト中級
カートドロワー
ページ右側からスライドインするオフキャンバスカートドロワー。商品一覧、メモ機能、フッター情報を1つのコンテナで管理し、アップセル機能にも対応する。
📁 ks-bootshop·MIT·32 行
🛒 カート/チェックアウト初級
カート注文備考欄
カートページに注文時の備考を記入できるテキストエリアを開閉形式で表示する。テーマ設定で有効化するとカート内容がある場合のみ表示され、JavaScript で自動保存機能に対応する。
📁 ks-bootshop·MIT·37 行
🛒 カート/チェックアウト初級
カートフッターの割引・小計・チェックアウト
カートドロワーの下部に割引適用状況、小計、チェックアウトボタンを表示するスニペット。適用割引があれば金額と共に一覧表示し、セール価格と定価の二重表示にも対応する。
📁 ks-bootshop·MIT·45 行
🛒 カート/チェックアウト初級
カートページの商品一覧
ショッピングカートの内容を一覧表示し、各商品の数量変更と削除機能を提供するテンプレート。カート内の商品数が0の場合は空カート表示、それ以外は商品ごとに画像・タイトル・価格・数量入力欄を出す。
📁 liquid·MIT·67 行
🛒 カート/チェックアウト中級
カート内の商品一覧
カートに入っている商品を行ごとに表示し、数量変更・削除・割引情報の表示に対応するスニペット。カートが空のときは空カートメッセージを表示する。
📁 ks-bootshop·MIT·118 行