skills.rest
tomtoto757
tomtoto757COMMUNITY
Explore all skills by this author →
GitHub

faceted-navigation

Manage URL-driven multi-select filter state for product listing pages.

14|3|Updated Mar 22, 2026
Search Tags:#accessibility#react#filters#ecommerce#url-state#algolia#faceted-navigation
One-click install
npx skills add https://github.com/tomtoto757/ecomm-ai-skills-hub --skill faceted-navigation-tomtoto757
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: faceted-navigation
Source: https://github.com/tomtoto757/ecomm-ai-skills-hub/tree/main/skills/storefront-shopping-experience/finsilabs/storefront-ui/faceted-navigation
Command: npx skills add https://github.com/tomtoto757/ecomm-ai-skills-hub --skill faceted-navigation-tomtoto757

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Faceted navigation keeps product listing filters in sync with the URL so shoppers can share, bookmark, and revisit filtered views while preserving back/forward behavior and SEO-friendly links. It prevents lost filter state on refresh or deep links and avoids stale facet counts and broken back-button experiences.

Core Features & Use Cases

  • URL-driven filter state: Encodes multi-select facets in the query string so filters are shareable and bookmarkable.
  • Disjunctive OR within facets, AND between facets: Supports OR logic for values in the same facet and AND logic across different facets to return correct result sets and counts.
  • Platform guidance and implementations: Instructions and patterns for Shopify (Search & Discovery), WooCommerce plugins, BigCommerce, and custom/headless builds using Algolia/Elasticsearch.
  • Mobile-friendly UX & accessibility: Drawer-style mobile filters, active filter pills above the grid, ARIA-friendly facet panels, and performance-minded price-range handling (commit on mouseup/touchend).

Quick Start

Add the URL-synced faceted navigation hook to your product listing so filter selections become repeated query params and the UI initializes from and responds to the browser URL.

Frequently Asked Questions about faceted-navigation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I sync multi-select product filters with the URL in React?▼

Multi-select product filters sync with the URL by encoding facet selections as repeated query parameters, using history.pushState and popstate listeners to initialize state on mount and preserve back and forward browser navigation.

What is the best way to handle disjunctive OR and AND logic for ecommerce faceted navigation?▼

Faceted navigation handles disjunctive OR logic for values within the same facet and AND logic across different facets. This correctly returns matching result sets and accurate facet counts for ecommerce product listing pages.

Does this faceted navigation pattern work with Shopify, WooCommerce, and headless storefronts?▼

This faceted navigation pattern supports Shopify, WooCommerce, BigCommerce, and custom headless storefronts. It provides specific implementation instructions for Shopify Search and Discovery, WooCommerce plugins, and headless builds using Algolia or Elasticsearch.

How do I manage price range filters without breaking checkbox facet counts?▼

Manage price range filters by excluding price_min and price_max from checkbox facetFilters, committing price changes on mouseup or touchend events. This prevents stale facet counts and maintains accurate active filter UI states.

Why do my ecommerce filter selections disappear on page refresh?▼

Filter selections disappear on refresh because they are not encoded into the URL query string. Storing multi-value facets as shareable URL query parameters ensures filtered views persist through refreshes, deep links, and browser back button navigation.

How do I build accessible mobile drawer filters for a product listing page?▼

Build accessible mobile drawer filters using ARIA-friendly facet panels and active filter pills above the grid. Performance-minded price-range handling commits on touchend, resetting the page on filter change to return correct products with updated facet counts.

Related Skills

Explore More Software Engineering Skills→
tomtoto757tomtoto757
14

ecommerce-caching

Implement layered CDN and Redis caching with event-driven invalidation for ecommerce storefronts.

Community
Advanced
kaushal-waygoodkaushal-waygood

github-discussion-query

Query GitHub discussions and return structured JSON metadata or jq-filtered results.

Community
Intermediate
zivtechzivtech

search-discovery-critic

Audit search index design, facets, and relevance tuning for Solr, Elasticsearch, Algolia, and Drupal Search API.

Official
Advanced
finsilabsfinsilabs
44

faceted_navigation

Implement multi-attribute product filtering with URL-shareable states for e-commerce platforms.

Official
Intermediate