Product filtering is one of the most important features of any e-commerce website. Whether you're selling clothing, electronics, or home goods, users expect to narrow down products quickly without navigating through dozens of pages.
When building a product filter, one challenge is keeping multiple filter values synchronized while ensuring the page remains shareable. Fortunately, the browser's built-in URLSearchParams API provides a simple and reliable solution.
Why Use URL-Based Filters?
Instead of storing filter selections entirely in JavaScript state, keeping them in the URL offers several advantages:
Users can bookmark filtered product pages.
Filtered URLs are easy to share.
Browser navigation (Back and Forward buttons) works naturally.
The application avoids unnecessary state complexity.
Example Implementation
The following example reads filter values from the current URL and updates them whenever a user selects a new option.
// Get current URL params
const params = new URLSearchParams(window.location.search);
// Build a filter object from the params
const filters = {
size: params.get('size') || '',
wash: params.get('wash') || '',
fit: params.get('fit') || ''
};
// Function to update a single filter and reload
function setFilter(key, value) {
if (value) {
params.set(key, value);
} else {
params.delete(key);
}
window.location.search = params.toString();
}
// Example: Filter button click handlers
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', () => {
const key = btn.dataset.filter;
const value = btn.dataset.value;
setFilter(key, value);
});
});
Why This Approach Works
Using URLSearchParams keeps your filtering logic straightforward and maintainable. Each filter is represented by a query parameter, making the application easier to debug and extend.
For example, a URL like:
/products?size=28&wash=light&fit=skinny
immediately communicates the current filter state and can be shared with anyone.
Scaling for Larger Catalogs
As your catalog grows, you may want to support:
Multiple values for the same filter
Sorting options
Price ranges
Pagination
Availability filters
Brand and category filters
Keeping filter state inside the URL makes these additions much easier while preserving a consistent user experience.
Improving the User Experience
A few simple enhancements can significantly improve usability:
Update filters without a full page reload using the History API.
Preserve scroll position after filtering.
Display active filter badges.
Allow users to clear all filters with one click.
Lazy-load additional products for better performance.
Final Thoughts
URLSearchParams is a lightweight browser API that solves a common problem in modern e-commerce applications. By storing filter selections directly in the URL, you create a cleaner architecture, improve navigation, and make filtered product pages easy to bookmark and share.
If you're building a product listing interface with vanilla JavaScript, this approach provides a solid foundation before introducing more advanced state management libraries.
Top comments (2)
I appreciate the open-ended prompt—sometimes the most valuable discussions start with a blank slate. What topic have you been itching to explore lately?
And the third one, too. Three empty posts in a row—this could be a powerful commentary on digital noise. What's the story behind this trilogy?