🛒 カート/チェックアウト中級
カート件数バッジ
カート内の商品件数を表示するバッジを、Shopify の Bundled section rendering 機能で動的に更新する。カート更新時に AJAX で再レンダリングされ、常に最新の件数を表示。
用途
ヘッダーのカートアイコン横に件数バッジを出すとき。カート追加・削除時に JavaScript を使わずサーバー側で自動更新される。
設置場所
sections/cart-count-badge.liquid に配置し、theme.liquid のヘッダー内で `{% section 'cart-count-badge' %}` で呼び出す。cart-count-badge.liquid スニペット側で実際のバッジ HTML とスタイルを実装する。
注意点
このセクションは Bundled section rendering の親コンポーネントとなるため、AJAX リクエスト時に指定されるセクション ID が管理画面で正しく登録されている必要がある。カート更新ハンドラ側の JavaScript で `Shopify.sections.load()` または Fetch API でこのセクション ID をターゲットに指定する実装が別途必須。空のセクションファイルだけでは何も表示されないため、必ず対応する 'cart-count-badge' スニペットを sections/ または snippets/ に用意する。
コード
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://www.shopify.dev/docs/api/ajax/reference/cart#bundled-section-rendering
%}
{% render 'cart-count-badge' %}出典・ライセンス
- 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 行