DEV Community

Rock
Rock

Posted on

Building a Fast Product Filter with Vanilla JavaScript

One of the easiest ways to improve an e-commerce store is by making it easier for customers to find what they're looking for. A slow or confusing filtering experience often leads to visitors leaving before they ever reach a product page.

While working on a clothing store, I spent some time simplifying the product filtering experience. The goal wasn't to build a complex search engine—it was simply to let shoppers narrow products by size, color, and price without refreshing the page.

The product data looked something like this:

const products = [
  { id: 1, name: "Slim Fit Jeans", size: "M", color: "Blue", price: 49.99 },
  { id: 2, name: "High Waist Skinny", size: "L", color: "Black", price: 59.99 },
  { id: 3, name: "Straight Leg Jeans", size: "S", color: "Blue", price: 44.99 }
];
Enter fullscreen mode Exit fullscreen mode

Instead of writing separate logic for every filter, I created a single function that checks the active filter values and returns only the matching products.

function filterProducts(products, filters) {
  return products.filter(product => {
    const sizeMatch =
      !filters.size || product.size === filters.size;

    const colorMatch =
      !filters.color || product.color === filters.color;

    const priceMatch =
      !filters.maxPrice || product.price <= filters.maxPrice;

    return sizeMatch && colorMatch && priceMatch;
  });
}
Enter fullscreen mode Exit fullscreen mode

Whenever a shopper changes one of the filters, the product list updates immediately.

document
  .getElementById("size-filter")
  .addEventListener("change", (event) => {
    filters.size = event.target.value;

    renderProducts(
      filterProducts(products, filters)
    );
  });
Enter fullscreen mode Exit fullscreen mode

The renderProducts() function simply clears the existing product cards and displays the filtered results. Since everything happens in the browser, there's no need to reload the page, making the shopping experience feel much faster.

A few things made the biggest difference during testing:

  • Keep the filtering logic in one place instead of scattering conditions throughout the code.
  • Store the current filter state in a single object so multiple filters work together naturally.
  • Only re-render the product grid after filtering is complete.
  • If you're adding a price slider, debounce the input so the page isn't constantly re-rendering while the user drags the handle.

This approach scales surprisingly well for small and medium-sized catalogs. For larger stores, you can move the filtering logic to an API while keeping the same frontend structure.

I used a similar pattern while working on a women's jeans category, where shoppers typically want to narrow results by size, color, and budget before browsing individual products. Making those filters quick and responsive reduced unnecessary clicks and helped visitors get to the products they actually wanted much faster.

The implementation itself isn't complicated. The challenge is keeping the experience simple enough that customers never have to think about how it works—they just find what they're looking for.

Top comments (0)