EC・商品
カート
サムネ・商品名・数量ステッパー（−／＋）・削除×を持つ明細行と、小計・送料・合計のサマリーを備えた買い物カゴ。数量変更や削除で行の金額と合計がその場で再計算される。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="cs-panel">
<div class="cs-head">
<span class="cs-head-title">カート</span>
<span class="cs-head-count" id="csCount">3点</span>
</div>
<ul class="cs-items" id="csItems">
<li class="cs-item" data-price="2480" data-qty="1">
<span class="cs-thumb" style="background:linear-gradient(135deg,#dce5f7,#c3d2f0)" aria-hidden="true"></span>
<div class="cs-mid">
<p class="cs-name">オーガニックコットンTシャツ</p>
<div class="cs-stepper">
<button class="cs-step cs-minus" aria-label="数量を減らす">−</button>
<span class="cs-qty" aria-live="polite">1</span>
<button class="cs-step cs-plus" aria-label="数量を増やす">＋</button>
</div>
</div>
<div class="cs-right">
<button class="cs-remove" aria-label="削除">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<line x1="3" y1="3" x2="11" y2="11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<line x1="11" y1="3" x2="3" y2="11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</button>
<span class="cs-line-total">¥2,480</span>
</div>
</li>
<li class="cs-item" data-price="3980" data-qty="1">
<span class="cs-thumb" style="background:linear-gradient(135deg,#f0e2d0,#e2cba8)" aria-hidden="true"></span>
<div class="cs-mid">
<p class="cs-name">レザーミニ財布</p>
<div class="cs-stepper">
<button class="cs-step cs-minus" aria-label="数量を減らす">−</button>
<span class="cs-qty" aria-live="polite">1</span>
<button class="cs-step cs-plus" aria-label="数量を増やす">＋</button>
</div>
</div>
<div class="cs-right">
<button class="cs-remove" aria-label="削除">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<line x1="3" y1="3" x2="11" y2="11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<line x1="11" y1="3" x2="3" y2="11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</button>
<span class="cs-line-total">¥3,980</span>
</div>
</li>
<li class="cs-item" data-price="1280" data-qty="2">
<span class="cs-thumb" style="background:linear-gradient(135deg,#dcefe0,#bfe0c8)" aria-hidden="true"></span>
<div class="cs-mid">
<p class="cs-name">アロマキャンドル</p>
<div class="cs-stepper">
<button class="cs-step cs-minus" aria-label="数量を減らす">−</button>
<span class="cs-qty" aria-live="polite">2</span>
<button class="cs-step cs-plus" aria-label="数量を増やす">＋</button>
</div>
</div>
<div class="cs-right">
<button class="cs-remove" aria-label="削除">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<line x1="3" y1="3" x2="11" y2="11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<line x1="11" y1="3" x2="3" y2="11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</button>
<span class="cs-line-total">¥2,560</span>
</div>
</li>
</ul>
<p class="cs-empty" id="csEmpty" hidden>カートは空です</p>
<div class="cs-summary">
<div class="cs-sum-row">
<span>小計</span>
<span class="cs-sum-val" id="csSubtotal">¥9,020</span>
</div>
<div class="cs-sum-row">
<span>送料</span>
<span class="cs-sum-val" id="csShipping">無料</span>
</div>
<div class="cs-sum-row cs-sum-total">
<span>合計</span>
<span class="cs-sum-val" id="csTotal">¥9,020</span>
</div>
</div>
<button class="cs-checkout" id="csCheckout">レジに進む</button>
</div>