Shop – E-commerce Store Website with Cart in HTML CSS JS

71 0 Websites codex Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Shop – E-commerce Store Website with Cart in HTML CSS JS

<header class="bar">
  <a href="#" class="logo">🛍️ ShopNow</a>
  <input id="search" placeholder="Search products…">
  <button class="cartbtn" id="openCart">🛒 <span id="count">0</span></button>
</header>
<section class="banner"><div><h1>Summer Sale</h1><p>Up to 40% off · Free shipping over $50</p></div><span>☀️</span></section>
<div class="filters" id="filters"></div>
<div class="sortrow"><span id="resCount"></span><select id="sort"><option value="pop">Most popular</option><option value="low">Price: low to high</option><option value="high">Price: high to low</option></select></div>
<main class="products" id="products"></main>
<aside class="cart" id="cart">
  <div class="chead"><h2>Your cart</h2><button id="closeCart" aria-label="Close">✕</button></div>
  <div class="items" id="items"></div>
  <div class="cfoot"><div class="row"><span>Subtotal</span><b id="sub">$0.00</b></div><div class="row"><span>Shipping</span><b id="ship">$0.00</b></div><div class="row total"><span>Total</span><b id="total">$0.00</b></div><button class="checkout" id="checkout">Checkout</button></div>
</aside>
<div class="shade" id="shade"></div>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Segoe UI", system-ui, sans-serif; background: #f6f7fb; color: #1f2330; }
.bar { position: sticky; top: 0; z-index: 5; display: flex; gap: 14px; align-items: center; padding: 14px 5vw; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.logo { font-weight: 800; font-size: 1.3rem; color: #1f2330; text-decoration: none; white-space: nowrap; }
#search { flex: 1; max-width: 480px; margin: 0 auto; padding: 11px 16px; border-radius: 99px; border: 1px solid #e1e4ee; background: #f6f7fb; outline: none; font: inherit; min-width: 0; }
.cartbtn { border: 0; background: #ff5a5f; color: #fff; padding: 10px 16px; border-radius: 99px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cartbtn.bump { animation: bump .4s; } @keyframes bump { 50% { transform: scale(1.2); } }
.banner { margin: 20px 5vw; border-radius: 20px; padding: 30px 36px; background: linear-gradient(120deg, #ff9a44, #fc6076); color: #fff; display: flex; align-items: center; justify-content: space-between; }
.banner h1 { font-size: clamp(1.6rem, 5vw, 2.6rem); } .banner span { font-size: 4rem; }
.filters { display: flex; gap: 8px; padding: 0 5vw; flex-wrap: wrap; }
.filters button { border: 1px solid #e1e4ee; background: #fff; padding: 8px 16px; border-radius: 99px; cursor: pointer; font: inherit; }
.filters button.on { background: #1f2330; color: #fff; border-color: #1f2330; }
.sortrow { display: flex; justify-content: space-between; align-items: center; padding: 16px 5vw 0; color: #6b7183; }
.sortrow select { padding: 8px; border-radius: 8px; border: 1px solid #e1e4ee; font: inherit; }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; padding: 16px 5vw 60px; }
.p { background: #fff; border-radius: 18px; padding: 14px; transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column; }
.p:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(30,40,80,.1); }
.pimg { aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center; font-size: 4.5rem; position: relative; }
.badge { position: absolute; top: 10px; left: 10px; background: #ff5a5f; color: #fff; font-size: .75rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; }
.fav { position: absolute; top: 8px; right: 8px; border: 0; background: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; }
.p h3 { font-size: 1rem; margin: 12px 0 4px; }
.p .cat { color: #8a90a2; font-size: .8rem; }
.p .rate { color: #f5a623; font-size: .85rem; margin: 4px 0; }
.pr { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; }
.pr b { font-size: 1.2rem; } .pr s { color: #aaa; font-size: .85rem; margin-left: 6px; }
.add { border: 0; background: #1f2330; color: #fff; width: 40px; height: 40px; border-radius: 12px; font-size: 1.3rem; cursor: pointer; }
.add:hover { background: #ff5a5f; }
.cart { position: fixed; top: 0; right: 0; height: 100vh; width: min(380px, 92vw); background: #fff; z-index: 20; transform: translateX(100%); transition: transform .35s; display: flex; flex-direction: column; }
.cart.on { transform: none; }
.shade { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 15; opacity: 0; pointer-events: none; transition: .3s; }
.shade.on { opacity: 1; pointer-events: auto; }
.chead { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #eee; }
.chead button { border: 0; background: none; font-size: 1.3rem; cursor: pointer; }
.items { flex: 1; overflow-y: auto; padding: 10px 20px; }
.ci { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.ci .e { width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; font-size: 1.8rem; flex-shrink: 0; }
.ci .nm { flex: 1; font-size: .92rem; } .ci .nm small { display: block; color: #888; }
.qty { display: flex; align-items: center; gap: 8px; }
.qty button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid #ddd; background: #fff; cursor: pointer; }
.emptycart { text-align: center; color: #999; padding: 50px 0; }
.cfoot { padding: 20px; border-top: 1px solid #eee; }
.row { display: flex; justify-content: space-between; margin-bottom: 8px; color: #555; }
.total { font-size: 1.2rem; color: #1f2330; }
.checkout { width: 100%; border: 0; background: #ff5a5f; color: #fff; padding: 14px; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: pointer; margin-top: 8px; }

// E-commerce shop: product grid, category filter, search, sort, favorites and a slide-in cart with totals (saved in localStorage)
var P = [
  [1, 'Wireless Headphones', 'Electronics', 79, 109, '🎧', '#e0f2fe', 4.8], [2, 'Smart Watch', 'Electronics', 149, 0, '⌚', '#ede9fe', 4.6],
  [3, 'Running Shoes', 'Fashion', 64, 89, '👟', '#ffe4e6', 4.7], [4, 'Denim Jacket', 'Fashion', 55, 0, '🧥', '#dbeafe', 4.3],
  [5, 'Coffee Maker', 'Home', 89, 120, '☕', '#fef3c7', 4.5], [6, 'Desk Lamp', 'Home', 29, 0, '💡', '#fef9c3', 4.4],
  [7, 'Backpack', 'Fashion', 42, 0, '🎒', '#dcfce7', 4.6], [8, 'Game Controller', 'Electronics', 49, 59, '🎮', '#f3e8ff', 4.9],
  [9, 'Plant Pot', 'Home', 18, 0, '🪴', '#d1fae5', 4.2], [10, 'Sunglasses', 'Fashion', 35, 50, '🕶️', '#e5e7eb', 4.5],
  [11, 'Bluetooth Speaker', 'Electronics', 59, 0, '🔊', '#cffafe', 4.4], [12, 'Scented Candle', 'Home', 15, 22, '🕯️', '#ffedd5', 4.7]
];
var cart = {}, favs = {}, cat = 'All', q = '', sort = 'pop';
try { cart = JSON.parse(localStorage.getItem('shop-cart') || '{}'); } catch (e) {}
function money(n) { return '$' + n.toFixed(2); }
function find(id) { return P.filter(function (p) { return p[0] == id; })[0]; }
var filters = document.getElementById('filters');
['All', 'Electronics', 'Fashion', 'Home'].forEach(function (c) {
  var b = document.createElement('button'); b.textContent = c; if (c === cat) b.className = 'on';
  b.onclick = function () { cat = c; filters.querySelectorAll('button').forEach(function (x) { x.classList.toggle('on', x === b); }); renderProducts(); };
  filters.appendChild(b);
});
function renderProducts() {
  var list = P.filter(function (p) { return (cat === 'All' || p[2] === cat) && p[1].toLowerCase().indexOf(q) > -1; });
  if (sort === 'low') list.sort(function (a, b) { return a[3] - b[3]; });
  if (sort === 'high') list.sort(function (a, b) { return b[3] - a[3]; });
  if (sort === 'pop') list.sort(function (a, b) { return b[7] - a[7]; });
  document.getElementById('resCount').textContent = list.length + ' products';
  document.getElementById('products').innerHTML = list.map(function (p) {
    var off = p[4] ? Math.round((1 - p[3] / p[4]) * 100) : 0;
    return '<div class="p"><div class="pimg" style="background:' + p[6] + '">' + p[5] + (off ? '<span class="badge">-' + off + '%</span>' : '') +
      '<button class="fav" data-f="' + p[0] + '">' + (favs[p[0]] ? '❤️' : '🤍') + '</button></div><h3>' + p[1] + '</h3><span class="cat">' + p[2] + '</span>' +
      '<div class="rate">★ ' + p[7] + '</div><div class="pr"><div><b>' + money(p[3]) + '</b>' + (p[4] ? '<s>' + money(p[4]) + '</s>' : '') + '</div><button class="add" data-id="' + p[0] + '" aria-label="Add to cart">+</button></div></div>';
  }).join('');
}
document.getElementById('products').addEventListener('click', function (e) {
  var a = e.target.closest('.add'), f = e.target.closest('.fav');
  if (a) { cart[a.dataset.id] = (cart[a.dataset.id] || 0) + 1; renderCart(); var c = document.getElementById('openCart'); c.classList.remove('bump'); void c.offsetWidth; c.classList.add('bump'); }
  if (f) { favs[f.dataset.f] = !favs[f.dataset.f]; f.textContent = favs[f.dataset.f] ? '❤️' : '🤍'; }
});
function renderCart() {
  var ids = Object.keys(cart).filter(function (id) { return cart[id] > 0; }), sub = 0, count = 0;
  document.getElementById('items').innerHTML = ids.length ? ids.map(function (id) {
    var p = find(id); sub += p[3] * cart[id]; count += cart[id];
    return '<div class="ci"><div class="e" style="background:' + p[6] + '">' + p[5] + '</div><div class="nm">' + p[1] + '<small>' + money(p[3]) + '</small></div>' +
      '<div class="qty"><button data-d="-1" data-id="' + id + '">−</button>' + cart[id] + '<button data-d="1" data-id="' + id + '">+</button></div></div>';
  }).join('') : '<p class="emptycart">Your cart is empty 🛒</p>';
  var ship = sub === 0 || sub >= 50 ? 0 : 5.99;
  document.getElementById('sub').textContent = money(sub);
  document.getElementById('ship').textContent = ship ? money(ship) : (sub ? 'FREE' : '$0.00');
  document.getElementById('total').textContent = money(sub + ship);
  document.getElementById('count').textContent = count;
  try { localStorage.setItem('shop-cart', JSON.stringify(cart)); } catch (e) {}
}
document.getElementById('items').addEventListener('click', function (e) { var b = e.target.closest('button'); if (!b) return; cart[b.dataset.id] = Math.max(0, cart[b.dataset.id] + +b.dataset.d); renderCart(); });
function toggleCart(on) { document.getElementById('cart').classList.toggle('on', on); document.getElementById('shade').classList.toggle('on', on); }
document.getElementById('openCart').onclick = function () { toggleCart(true); };
document.getElementById('closeCart').onclick = document.getElementById('shade').onclick = function () { toggleCart(false); };
document.getElementById('checkout').onclick = function () { if (!Object.keys(cart).some(function (k) { return cart[k]; })) return; this.textContent = '✓ Order placed (demo)'; cart = {}; renderCart(); var b = this; setTimeout(function () { b.textContent = 'Checkout'; }, 2000); };
document.getElementById('search').oninput = function () { q = this.value.toLowerCase(); renderProducts(); };
document.getElementById('sort').onchange = function () { sort = this.value; renderProducts(); };
renderProducts(); renderCart();

Comments 0

…

Shop – E-commerce Store Website with Cart in HTML CSS JS

Recommended

Comments 0