E-commerce Product Filter (Full Code)

  • Home
  • Blog
  • E-commerce Product Filter (Full Code)
Featured

E-commerce Product Filter (Full Code)

March 27, 2026 in Projects Explanation

Here’s a complete working project (HTML + CSS + JS in one file) you can copy and run directly 👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>E-commerce Filter</title>
  <style>
    body {
      font-family: Arial;
      margin: 20px;
      background: #f5f5f5;
    }

    h1 {
      text-align: center;
    }

    .controls {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 20px;
      justify-content: center;
    }

    input, select, button {
      padding: 10px;
      font-size: 14px;
    }

    .products {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 15px;
    }

    .product {
      background: white;
      padding: 10px;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      text-align: center;
    }

    .product img {
      width: 100%;
      height: 150px;
      object-fit: cover;
    }
  </style>
</head>
<body>

<h1>🛒 Product Filter</h1>

<div class="controls">
  <input type="text" id="search" placeholder="Search products...">

  <select id="category">
    <option value="all">All Categories</option>
    <option value="Electronics">Electronics</option>
    <option value="Clothes">Clothes</option>
  </select>

  <select id="sort">
    <option value="">Sort by Price</option>
    <option value="low-high">Low → High</option>
    <option value="high-low">High → Low</option>
  </select>

  <input type="number" id="price" placeholder="Max Price">

</div>

<div class="products" id="product-list"></div>

<script>
const products = [
  {name: "iPhone 13", price: 70000, category: "Electronics", rating: 4.5, image: "https://via.placeholder.com/200"},
  {name: "Samsung TV", price: 40000, category: "Electronics", rating: 4.2, image: "https://via.placeholder.com/200"},
  {name: "Laptop", price: 55000, category: "Electronics", rating: 4.7, image: "https://via.placeholder.com/200"},
  {name: "T-Shirt", price: 999, category: "Clothes", rating: 4.1, image: "https://via.placeholder.com/200"},
  {name: "Jeans", price: 1999, category: "Clothes", rating: 4.3, image: "https://via.placeholder.com/200"},
  {name: "Jacket", price: 2999, category: "Clothes", rating: 4.6, image: "https://via.placeholder.com/200"}
];

// Display Products
function displayProducts(data) {
  const container = document.getElementById("product-list");
  container.innerHTML = "";

  data.forEach(p => {
    container.innerHTML += `
      <div class="product">
        <img src="${p.image}">
        <h3>${p.name}</h3>
        <p>₹${p.price}</p>
        <p>⭐ ${p.rating}</p>
      </div>
    `;
  });
}

// Filter Logic
function filterProducts() {
  let result = [...products];

  const search = document.getElementById("search").value.toLowerCase();
  const category = document.getElementById("category").value;
  const sort = document.getElementById("sort").value;
  const price = document.getElementById("price").value;

  // Search
  if (search) {
    result = result.filter(p => p.name.toLowerCase().includes(search));
  }

  // Category
  if (category !== "all") {
    result = result.filter(p => p.category === category);
  }

  // Price
  if (price) {
    result = result.filter(p => p.price <= price);
  }

  // Sorting
  if (sort === "low-high") {
    result.sort((a, b) => a.price - b.price);
  } else if (sort === "high-low") {
    result.sort((a, b) => b.price - a.price);
  }

  displayProducts(result);
}

// Events
document.getElementById("search").addEventListener("input", filterProducts);
document.getElementById("category").addEventListener("change", filterProducts);
document.getElementById("sort").addEventListener("change", filterProducts);
document.getElementById("price").addEventListener("input", filterProducts);

// Initial Load
displayProducts(products);
</script>

</body>
</html>

🚀 What You Get

  • ✅ Live search filtering
  • ✅ Category filter
  • ✅ Price filter
  • ✅ Sorting
  • ✅ Dynamic UI update (no reload)
🇮🇳 Amazon India 🌍 Amazon Global

aditya singh