How to Build an E-Commerce Store with Shopping Cart

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ritebook Store</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header class="site-header">
    <h1>Ritebook Store</h1>
    <button id="cart-toggle" class="cart-toggle">
      🛒 <span id="cart-count" class="cart-count">0</span>
    </button>
  </header>

  <main>
    <section id="product-grid" class="product-grid">
      <!-- Product cards are rendered here by script.js -->
    </section>
  </main>

  <div id="cart-overlay" class="cart-overlay"></div>

  <aside id="cart-sidebar" class="cart-sidebar">
    <div class="cart-header">
      <h2>Your Cart</h2>
      <button id="cart-close" class="cart-close">×</button>
    </div>

    <div id="cart-items" class="cart-items">
      <!-- Cart line items are rendered here by script.js -->
    </div>

    <div class="cart-footer">
      <div class="cart-subtotal">
        <span>Subtotal</span>
        <span id="cart-subtotal">$0.00</span>
      </div>
      <button id="checkout-btn" class="checkout-btn">Checkout</button>
    </div>
  </aside>

  <script src="script.js"></script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", Arial, sans-serif;
}

body {
    background: #f7f8fa;
    color: #1e293b;
    min-height: 100vh;
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 32px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.site-header h1 {
    font-size: 20px;
}

.cart-toggle {
    position: relative;
    background: #3498db;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 16px;
    cursor: pointer;
}

.cart-count {
    background: #e74c3c;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 100px;
    padding: 1px 7px;
    margin-left: 4px;
}

/* Product grid: auto-fill + minmax reflows columns without media queries */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    padding: 32px;
    max-width: 1100px;
    margin: 0 auto;
}

.product-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-image {
    font-size: 48px;
    text-align: center;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 24px 0;
}

.product-name {
    font-size: 16px;
}

.product-description {
    font-size: 13.5px;
    color: #64748b;
    flex-grow: 1;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.product-price {
    font-weight: 700;
}

.add-to-cart-btn {
    background: #3498db;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.add-to-cart-btn:hover {
    background: #2980b9;
}

/* Dimmed backdrop behind the cart sidebar */
.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 20;
}

.cart-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Cart sidebar slides in from off-screen */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -380px;
    width: 360px;
    max-width: 90vw;
    height: 100vh;
    background: #ffffff;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
    transition: right 0.25s ease;
    display: flex;
    flex-direction: column;
    z-index: 30;
}

.cart-sidebar.open {
    right: 0;
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.cart-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #64748b;
}

.cart-items {
    flex-grow: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.cart-empty {
    color: #94a3b8;
    text-align: center;
    margin-top: 40px;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.cart-item-emoji {
    font-size: 28px;
}

.cart-item-details {
    flex-grow: 1;
}

.cart-item-name {
    font-size: 14px;
    font-weight: 600;
}

.cart-item-price {
    font-size: 12.5px;
    color: #64748b;
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cart-item-controls button {
    width: 26px;
    height: 26px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.remove-btn {
    color: #e74c3c;
    border: none !important;
    background: none !important;
    font-size: 16px !important;
}

.cart-footer {
    padding: 20px;
    border-top: 1px solid #e2e8f0;
}

.cart-subtotal {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 14px;
}

.checkout-btn {
    width: 100%;
    background: #27ae60;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.checkout-btn:hover {
    background: #219150;
}

const PRODUCTS = [
    { id: 1, name: "Wireless Headphones", price: 59.99, emoji: "🎧", description: "Over-ear, 30-hour battery life." },
    { id: 2, name: "Canvas Backpack", price: 39.5, emoji: "🎒", description: "Water-resistant, laptop compartment." },
    { id: 3, name: "Stainless Water Bottle", price: 18.0, emoji: "🧴", description: "Keeps drinks cold for 24 hours." },
    { id: 4, name: "Polarized Sunglasses", price: 24.99, emoji: "🕶", description: "UV400 protection, lightweight frame." },
    { id: 5, name: "Smart Watch", price: 89.0, emoji: "⌚", description: "Heart-rate tracking, 7-day battery." },
    { id: 6, name: "Running Sneakers", price: 64.99, emoji: "👟", description: "Breathable mesh, cushioned sole." },
    { id: 7, name: "Yoga Mat", price: 28.5, emoji: "🧘", description: "Non-slip, extra thick for joint support." },
    { id: 8, name: "Ceramic Coffee Mug", price: 12.99, emoji: "☕", description: "12oz, microwave and dishwasher safe." },
    { id: 9, name: "LED Desk Lamp", price: 34.0, emoji: "💡", description: "Adjustable brightness, USB charging port." },
    { id: 10, name: "Bluetooth Speaker", price: 45.99, emoji: "🔊", description: "Waterproof, 12-hour playtime." },
    { id: 11, name: "Leather Wallet", price: 32.5, emoji: "👛", description: "RFID-blocking, slim bifold design." },
    { id: 12, name: "Travel Duffel Bag", price: 54.0, emoji: "🧢", description: "Carry-on sized, weekend getaway essential." },
];

const CART_STORAGE_KEY = "myritebook_cart";

let cart = loadCart();

/**
 * Loads the saved cart from localStorage, or returns an empty cart
 * if nothing's saved yet (or the saved value is corrupted).
 */
function loadCart() {
    try {
        const raw = localStorage.getItem(CART_STORAGE_KEY);
        return raw ? JSON.parse(raw) : [];
    } catch (error) {
        return [];
    }
}

function saveCart() {
    localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(cart));
}

function formatCurrency(amount) {
    return "$" + amount.toFixed(2);
}

/**
 * Builds the product grid from the PRODUCTS array. Called once on load —
 * the products themselves never change, so this only needs to run once.
 */
function renderProducts() {
    const grid = document.getElementById("product-grid");
    grid.innerHTML = PRODUCTS.map(product => `
        <article class="product-card" data-id="${product.id}">
            <div class="product-image">${product.emoji}</div>
            <h3 class="product-name">${product.name}</h3>
            <p class="product-description">${product.description}</p>
            <div class="product-footer">
                <span class="product-price">${formatCurrency(product.price)}</span>
                <button class="add-to-cart-btn" data-action="add" data-id="${product.id}">Add to Cart</button>
            </div>
        </article>
    `).join("");
}

function addToCart(productId) {
    const existingItem = cart.find(item => item.id === productId);
    if (existingItem) {
        existingItem.quantity += 1;
    } else {
        cart.push({ id: productId, quantity: 1 });
    }
    saveCart();
    renderCart();
}

function changeQuantity(productId, delta) {
    const item = cart.find(item => item.id === productId);
    if (!item) return;

    item.quantity += delta;
    if (item.quantity <= 0) {
        cart = cart.filter(cartItem => cartItem.id !== productId);
    }
    saveCart();
    renderCart();
}

function removeFromCart(productId) {
    cart = cart.filter(item => item.id !== productId);
    saveCart();
    renderCart();
}

/**
 * Re-renders the cart sidebar, subtotal, and item-count badge from the
 * current `cart` array. Called after every cart mutation — this keeps
 * the DOM as a pure reflection of state, rather than being hand-edited
 * in multiple places.
 */
function renderCart() {
    const cartItemsEl = document.getElementById("cart-items");
    const subtotalEl = document.getElementById("cart-subtotal");
    const countEl = document.getElementById("cart-count");

    if (cart.length === 0) {
        cartItemsEl.innerHTML = `<p class="cart-empty">Your cart is empty.</p>`;
    } else {
        cartItemsEl.innerHTML = cart.map(item => {
            const product = PRODUCTS.find(p => p.id === item.id);
            const lineTotal = product.price * item.quantity;

            return `
                <div class="cart-item" data-id="${item.id}">
                    <span class="cart-item-emoji">${product.emoji}</span>
                    <div class="cart-item-details">
                        <p class="cart-item-name">${product.name}</p>
                        <p class="cart-item-price">${formatCurrency(product.price)} × ${item.quantity} = ${formatCurrency(lineTotal)}</p>
                    </div>
                    <div class="cart-item-controls">
                        <button data-action="decrease" data-id="${item.id}">−</button>
                        <span>${item.quantity}</span>
                        <button data-action="increase" data-id="${item.id}">+</button>
                        <button data-action="remove" data-id="${item.id}" class="remove-btn">×</button>
                    </div>
                </div>
            `;
        }).join("");
    }

    const subtotal = cart.reduce((sum, item) => {
        const product = PRODUCTS.find(p => p.id === item.id);
        return sum + product.price * item.quantity;
    }, 0);

    subtotalEl.textContent = formatCurrency(subtotal);

    const itemCount = cart.reduce((sum, item) => sum + item.quantity, 0);
    countEl.textContent = String(itemCount);
}

// One listener for the whole grid, instead of one per "Add to Cart" button.
document.getElementById("product-grid").addEventListener("click", (event) => {
    const button = event.target.closest("[data-action='add']");
    if (!button) return;
    addToCart(Number(button.dataset.id));
});

// Same idea for the cart: one listener handles increase, decrease, and remove
// for every line item, current or future.
document.getElementById("cart-items").addEventListener("click", (event) => {
    const button = event.target.closest("button[data-action]");
    if (!button) return;

    const productId = Number(button.dataset.id);
    const action = button.dataset.action;

    if (action === "increase") changeQuantity(productId, 1);
    if (action === "decrease") changeQuantity(productId, -1);
    if (action === "remove") removeFromCart(productId);
});

const cartSidebar = document.getElementById("cart-sidebar");
const cartOverlay = document.getElementById("cart-overlay");

document.getElementById("cart-toggle").addEventListener("click", () => {
    cartSidebar.classList.add("open");
    cartOverlay.classList.add("visible");
});

function closeCart() {
    cartSidebar.classList.remove("open");
    cartOverlay.classList.remove("visible");
}

document.getElementById("cart-close").addEventListener("click", closeCart);
cartOverlay.addEventListener("click", closeCart);

document.getElementById("checkout-btn").addEventListener("click", () => {
    if (cart.length === 0) {
        alert("Your cart is empty.");
        return;
    }

    const itemCount = cart.reduce((sum, item) => sum + item.quantity, 0);
    const subtotal = cart.reduce((sum, item) => {
        const product = PRODUCTS.find(p => p.id === item.id);
        return sum + product.price * item.quantity;
    }, 0);

    // Demo checkout only — it doesn't process real payments. A real
    // checkout needs a payment provider (e.g. Stripe or Razorpay)
    // integrated on a server you control; never handle card details
    // directly in client-side JavaScript.
    alert(`Order summary:\n${itemCount} item(s)\nTotal: ${formatCurrency(subtotal)}\n\nThanks for your order!`);

    cart = [];
    saveCart();
    renderCart();
    closeCart();
});

renderProducts();
renderCart();

ecommerce-store/
├── index.html
├── style.css
└── script.js