EC・商品
価格シミュレーター
数量 ± とオプション選択で合計金額がカンマ区切りのアニメ付きカウントアップで更新されるウィジェット。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="pq-wrap">
<p class="pq-title">ドリップコーヒーセット</p>
<div class="pq-option-row">
<label class="pq-label" for="pqGrade">グレード</label>
<select class="pq-select" id="pqGrade">
<option value="0">スタンダード (±¥0)</option>
<option value="500">プレミアム (+¥500)</option>
<option value="1200">スペシャルティ (+¥1,200)</option>
</select>
</div>
<div class="pq-qty-row">
<span class="pq-label">数量</span>
<div class="pq-qty-ctrl">
<button class="pq-qty-btn" id="pqMinus" aria-label="減らす">−</button>
<span class="pq-qty-val" id="pqQty" aria-live="polite">1</span>
<button class="pq-qty-btn" id="pqPlus" aria-label="増やす">＋</button>
</div>
</div>
<div class="pq-divider"></div>
<div class="pq-total-row">
<span class="pq-total-label">合計</span>
<span class="pq-total-val" id="pqTotal" aria-live="polite">¥1,980</span>
</div>
<button class="pq-cart-btn">カートに入れる</button>
</div>