feat(shop): sync category, price range, and sort filter states with URL search parameters for shareable links

[Pcmhacker-hero]

Description

In frontend/shop.html and frontend/scripts/shop.js, selecting category filters, price range sliders, or sorting orders updates the UI dynamically but does not update window.location.search. When users refresh the page, click the browser back button, or copy the URL to share with others, all active filters reset to default.

Steps to Reproduce

1. Open frontend/shop.html.
2. Filter by Category: "T-Shirts", Price: "$20 - $50", and Sort: "Price: Low to High".
3. Check the browser URL address bar; it remains /shop.html without query params.
4. Refresh the page; all filters are cleared and all products are displayed.

Expected Behavior

• Frontend: Whenever filter or sort state changes in shop-controls.js, update URL params via history.pushState or history.replaceState (e.g. shop.html?category=tshirts&minPrice=20&maxPrice=50&sort=price_asc).
• Frontend: On window.DOMContentLoaded and window.onpopstate, parse URL params and pre-populate filter controls before fetching products.

Implementation Hints

Frontend (frontend/scripts/shop-filter-utils.js & frontend/scripts/shop.js):

export function syncFiltersToUrl(filters) {
  const params = new URLSearchParams();
  if (filters.category) params.set("category", filters.category);
  if (filters.minPrice) params.set("minPrice", filters.minPrice);
  if (filters.maxPrice) params.set("maxPrice", filters.maxPrice);
  if (filters.sort) params.set("sort", filters.sort);

  const newUrl = `${window.location.pathname}?${params.toString()}`;
  window.history.replaceState({}, "", newUrl);
}

export function loadFiltersFromUrl() {
  const params = new URLSearchParams(window.location.search);
  return {
    category: params.get("category") || "",
    minPrice: params.get("minPrice") || "",
    maxPrice: params.get("maxPrice") || "",
    sort: params.get("sort") || "default"
  };
}

Affected Files

• frontend/scripts/shop.js
• frontend/scripts/shop-controls.js
• frontend/scripts/shop-filter-utils.js
• frontend/shop.html

Labels
type:feature, level:beginner, GSSoC-26

[hydra-maintainer]

👋 Welcome to Hiero, @Pcmhacker-hero!

Thanks for your first contribution — we're thrilled to have you here.

Welcome to our E-commerce project! 🎉
Thanks for contributing. Please read CONTRIBUTING.md before getting started.

Getting Started Checklist:

• Read CONTRIBUTING.md
• Sign your commits (DCO)

Quick tips:

• 📖 Read CONTRIBUTING.md before you start
• 💬 Use /assign on any open issue to pick it up
• ❓ Use /help to see all available bot commands
• 🙋 Ask questions freely — no question is too basic!

We look forward to working with you! 🚀

[Pcmhacker-hero]

Hey Sir, I’d like to work on this issue. Could you please assign it to me? I’ll look into it and try my best to fix it. Thank you!

[mspandey]

/claim