Bootstrap 5 Shopping Cart with Coupon Code

<section class="wdw-stage"><div class="container" style="max-width:1000px">
<div class="mb-4"><span class="wdw-eyebrow">Checkout</span><h1 class="wdw-heading h3 mb-0">Shopping cart <span class="wdw-muted fw-normal fs-6" id="cartCount">(3 items)</span></h1></div>
<div class="row g-4 align-items-stretch">
<div class="col-lg-7"><div class="wdw-card px-4 h-100 d-flex flex-column"><ul class="list-unstyled m-0" id="cartItems">
<li class="item d-flex gap-3 py-4" data-price="10.0">
<img src="https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=240&h=240&fit=crop&q=80" alt="Classic round-neck tee" width="88" height="88" class="thumb rounded-4 flex-none object-fit-cover">
<div class="flex-grow-1 min-w-0"><div class="d-flex justify-content-between gap-2 mb-3"><div class="min-w-0"><h3 class="h6 mb-1">Classic round-neck tee</h3><p class="small wdw-muted mb-0">Size L · Maxtra</p></div><strong class="line-total">$10.00</strong></div>
<div class="d-flex align-items-center justify-content-between"><div class="qty d-inline-flex align-items-center rounded-pill bg-body-tertiary p-1" role="group" aria-label="Quantity for Classic round-neck tee"><button class="btn btn-sm rounded-circle border-0 text-body" type="button" data-step="-1" aria-label="Decrease quantity">−</button><output class="px-3 fw-semibold text-center" aria-live="polite">1</output><button class="btn btn-sm rounded-circle border-0 text-body" type="button" data-step="1" aria-label="Increase quantity">+</button></div>
<button type="button" class="btn btn-sm btn-icon-sm rounded-circle border-0 text-body-secondary remove" aria-label="Remove Classic round-neck tee"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6"/></svg></button></div></div></li>
<li class="item d-flex gap-3 py-4" data-price="15.0">
<img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?w=240&h=240&fit=crop&q=80" alt="Flower formal tee" width="88" height="88" class="thumb rounded-4 flex-none object-fit-cover">
<div class="flex-grow-1 min-w-0"><div class="d-flex justify-content-between gap-2 mb-3"><div class="min-w-0"><h3 class="h6 mb-1">Flower formal tee</h3><p class="small wdw-muted mb-0">Size L · Adda</p></div><strong class="line-total">$15.00</strong></div>
<div class="d-flex align-items-center justify-content-between"><div class="qty d-inline-flex align-items-center rounded-pill bg-body-tertiary p-1" role="group" aria-label="Quantity for Flower formal tee"><button class="btn btn-sm rounded-circle border-0 text-body" type="button" data-step="-1" aria-label="Decrease quantity">−</button><output class="px-3 fw-semibold text-center" aria-live="polite">1</output><button class="btn btn-sm rounded-circle border-0 text-body" type="button" data-step="1" aria-label="Increase quantity">+</button></div>
<button type="button" class="btn btn-sm btn-icon-sm rounded-circle border-0 text-body-secondary remove" aria-label="Remove Flower formal tee"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6"/></svg></button></div></div></li>
<li class="item d-flex gap-3 py-4" data-price="9.0">
<img src="https://images.unsplash.com/photo-1583743814966-8936f5b7be1a?w=240&h=240&fit=crop&q=80" alt="Printed white tee" width="88" height="88" class="thumb rounded-4 flex-none object-fit-cover">
<div class="flex-grow-1 min-w-0"><div class="d-flex justify-content-between gap-2 mb-3"><div class="min-w-0"><h3 class="h6 mb-1">Printed white tee</h3><p class="small wdw-muted mb-0">Size M · Cantabil</p></div><strong class="line-total">$9.00</strong></div>
<div class="d-flex align-items-center justify-content-between"><div class="qty d-inline-flex align-items-center rounded-pill bg-body-tertiary p-1" role="group" aria-label="Quantity for Printed white tee"><button class="btn btn-sm rounded-circle border-0 text-body" type="button" data-step="-1" aria-label="Decrease quantity">−</button><output class="px-3 fw-semibold text-center" aria-live="polite">1</output><button class="btn btn-sm rounded-circle border-0 text-body" type="button" data-step="1" aria-label="Increase quantity">+</button></div>
<button type="button" class="btn btn-sm btn-icon-sm rounded-circle border-0 text-body-secondary remove" aria-label="Remove Printed white tee"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6"/></svg></button></div></div></li>
</ul><p class="text-center wdw-muted py-5 mb-0 d-none" id="cartEmpty">Your cart is empty.</p>
<div class="mt-auto border-top py-3"><div class="d-flex justify-content-between small mb-2"><span id="shipMsg">You are $16.00 away from free shipping</span><span class="wdw-muted">$50</span></div><div class="progress" style="height:6px" role="progressbar" aria-label="Free shipping progress" aria-valuemin="0" aria-valuemax="50" id="shipBar"><div class="progress-bar" id="shipFill"></div></div></div></div></div>
<div class="col-lg-5"><div class="wdw-card p-4 h-100 d-flex flex-column">
<h2 class="wdw-heading h5 mb-3">Order summary</h2>
<form class="mb-1" id="couponForm" novalidate><label for="coupon" class="form-label small wdw-muted">Promo code</label>
<div class="d-flex gap-2"><input id="coupon" class="form-control rounded-pill ps-3" placeholder="Try SAVE20" autocomplete="off"><button class="btn btn-dark rounded-pill px-4" type="submit">Apply</button></div>
<div class="small mt-2" id="couponMsg" role="status"></div></form>
<dl class="mt-3 mb-0 small">
<div class="d-flex justify-content-between py-1"><dt class="fw-normal wdw-muted">Subtotal</dt><dd class="mb-0" id="sSub">$34.00</dd></div>
<div class="d-flex justify-content-between py-1 d-none" id="discRow"><dt class="fw-normal wdw-muted">Discount (20%)</dt><dd class="mb-0 text-success" id="sDisc">-$0.00</dd></div>
<div class="d-flex justify-content-between py-1"><dt class="fw-normal wdw-muted">Shipping</dt><dd class="mb-0" id="sShip">$4.00</dd></div>
<div class="d-flex justify-content-between pt-3 mt-2 border-top fs-5"><dt class="fw-bold">Total</dt><dd class="mb-0 fw-bold" id="sTotal">$38.00</dd></div></dl>
<button type="button" class="btn btn-primary rounded-pill w-100 mt-4">Checkout</button>
<p class="d-flex align-items-center justify-content-center gap-2 small wdw-muted mt-3 mb-0"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>Secure checkout · Visa, Mastercard, PayPal</p>
<a href="#" class="d-inline-flex align-items-center justify-content-center gap-2 mt-auto pt-3 link-secondary link-underline-opacity-0 small fw-semibold"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>Continue shopping</a>
</div></div></div></div></section>

/* Web Designer Wall library style — shared base for every Bootstrap 5 snippet.
   Indigo accent, Plus Jakarta Sans, soft cards, pill buttons. Works in light and dark. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root,
[data-bs-theme="light"] {
  --wdw-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-family: var(--wdw-font);
  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-primary-text-emphasis: #3730a3;
  --bs-primary-bg-subtle: #eef2ff;
  --bs-primary-border-subtle: #c7d2fe;
  --bs-link-color: #4f46e5;
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: #4338ca;
  --bs-link-hover-color-rgb: 67, 56, 202;
  --bs-focus-ring-color: rgba(79, 70, 229, 0.25);
  --bs-border-radius: 0.75rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --wdw-radius-card: 1.25rem;
  --wdw-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 16px 40px -16px rgba(16, 24, 40, 0.22);
  --wdw-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px -4px rgba(16, 24, 40, 0.12);
  --wdw-stage: #f5f6fb;
}

[data-bs-theme="dark"] {
  --bs-primary: #818cf8;
  --bs-primary-rgb: 129, 140, 248;
  --bs-primary-text-emphasis: #c7d2fe;
  --bs-primary-bg-subtle: rgba(129, 140, 248, 0.14);
  --bs-primary-border-subtle: rgba(129, 140, 248, 0.35);
  --bs-link-color: #a5b4fc;
  --bs-link-color-rgb: 165, 180, 252;
  --bs-link-hover-color: #c7d2fe;
  --bs-link-hover-color-rgb: 199, 210, 254;
  --bs-focus-ring-color: rgba(129, 140, 248, 0.35);
  --wdw-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
  --wdw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
  --wdw-stage: #0f1117;
}

body { font-family: var(--wdw-font); -webkit-font-smoothing: antialiased; }

/* Bootstrap compiles its blue into these components; point them at the accent. */
.btn-primary {
  --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca;
  --bs-btn-active-bg: #3730a3; --bs-btn-active-border-color: #3730a3;
  --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0f1117; --bs-btn-hover-bg: #a5b4fc; --bs-btn-hover-border-color: #a5b4fc; --bs-btn-hover-color: #0f1117; --bs-btn-active-color: #0f1117; }
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn { --bs-btn-font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-sm { min-height: 36px; }
.form-control, .form-select { min-height: 44px; border-radius: .75rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgba(var(--bs-primary-rgb), .6); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }
.nav { --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-hover-color: var(--bs-emphasis-color); }
.pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-color: var(--bs-body-color); --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--bs-primary); }
.list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); border-radius: .875rem; box-shadow: var(--wdw-shadow-sm); }
.accordion { --bs-accordion-active-bg: var(--bs-primary-bg-subtle); --bs-accordion-active-color: var(--bs-primary-text-emphasis); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.badge { font-weight: 600; }

/* Library building blocks — use these instead of re-inventing them per snippet. */
.wdw-stage { min-height: 100vh; display: flex; align-items: center; background: var(--wdw-stage); padding-block: 3rem; }
.wdw-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: var(--wdw-radius-card); box-shadow: var(--wdw-shadow); }
.wdw-card-sm { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; box-shadow: var(--wdw-shadow-sm); }
.wdw-aurora { position: relative; color: #fff; background: radial-gradient(60% 55% at 100% 0, #818cf8 0, transparent 70%), radial-gradient(65% 60% at 0 100%, #ec4899 0, transparent 65%), #1e1b4b; }
.wdw-eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-primary); }
.wdw-heading { font-weight: 800; letter-spacing: -.02em; color: var(--bs-emphasis-color); }
.wdw-muted { color: var(--bs-secondary-color); }
.wdw-icon { width: 2.75rem; height: 2.75rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: .875rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }

/* Component */
.min-w-0 { min-width: 0; }
.flex-none { flex: none; }
#cartItems .item + .item { border-top: 1px solid var(--bs-border-color); }
.qty .btn { width: 32px; height: 32px; min-height: 32px; padding: 0; font-size: 1.1rem; line-height: 1; }
.qty .btn:hover { background: var(--bs-border-color); }
.qty output { min-width: 2.5rem; }
.btn-icon-sm { width: 40px; height: 40px; padding: 0; }
.btn-icon-sm:hover { color: var(--bs-danger) !important; background: var(--bs-danger-bg-subtle); }
@media (max-width: 575.98px) { .item .thumb { width: 72px; height: 72px; } .item .line-total { font-size: .95rem; } }
[data-bs-theme="dark"] #couponForm .btn-dark { --bs-btn-bg: #e5e7eb; --bs-btn-border-color: #e5e7eb; --bs-btn-color: #111827; --bs-btn-hover-bg: #fff; --bs-btn-hover-color: #111827; --bs-btn-hover-border-color: #fff; }

function initCart() {
  const list = document.getElementById('cartItems');
  if (!list) return;
  const money = function (n) { return '$' + n.toFixed(2); };
  let discount = 0;

  function update() {
    const items = list.querySelectorAll('.item');
    let sub = 0;
    items.forEach(function (it) {
      const q = Number(it.querySelector('output').textContent);
      const line = q * Number(it.dataset.price);
      it.querySelector('.line-total').textContent = money(line);
      sub += line;
    });
    const disc = sub * discount;
    document.getElementById('sSub').textContent = money(sub);
    document.getElementById('sDisc').textContent = '-' + money(disc);
    document.getElementById('discRow').classList.toggle('d-none', !discount);
    const ship = sub === 0 || sub - disc >= 50 ? 0 : 4;
    document.getElementById('sShip').textContent = ship ? money(ship) : 'Free';
    document.getElementById('sTotal').textContent = money(sub - disc + ship);
    const left = Math.max(0, 50 - (sub - disc));
    document.getElementById('shipMsg').textContent = left ? 'You are ' + money(left) + ' away from free shipping' : 'You have free shipping';
    document.getElementById('shipFill').style.width = Math.min(100, (sub - disc) * 2) + '%';
    document.getElementById('shipBar').setAttribute('aria-valuenow', Math.min(50, sub - disc));
    document.getElementById('cartCount').textContent = '(' + items.length + (items.length === 1 ? ' item)' : ' items)');
    document.getElementById('cartEmpty').classList.toggle('d-none', items.length > 0);
  }

  list.addEventListener('click', function (e) {
    const step = e.target.closest('[data-step]');
    const rm = e.target.closest('.remove');
    if (step) {
      const out = step.closest('.item').querySelector('output');
      out.textContent = Math.min(9, Math.max(1, Number(out.textContent) + Number(step.dataset.step)));
    } else if (rm) {
      rm.closest('.item').remove();
    } else return;
    update();
  });

  document.getElementById('couponForm').addEventListener('submit', function (e) {
    e.preventDefault();
    const msg = document.getElementById('couponMsg');
    const ok = document.getElementById('coupon').value.trim().toUpperCase() === 'SAVE20';
    discount = ok ? 0.2 : 0;
    msg.textContent = ok ? 'Code applied: 20% off your order.' : 'That code is not valid.';
    msg.className = 'small mt-2 ' + (ok ? 'text-success' : 'text-danger');
    update();
  });
  update();
}
initCart();