filtering-system

Official

Unified product filtering for server and client.

Authorsaleor
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Product lists often require complex filters that span server-side data fetching and client-side presentation. This Skill provides a coherent architecture to define, implement, and reason about filtering and sorting for category, price, and attribute-based filters on e-commerce storefronts.

Core Features & Use Cases

  • Filter Architecture: server-side categories, price, and sort; client-side colors and sizes.
  • Server-Side Filtering: category slugs are resolved to IDs and used in queries.
  • Client-Side Filtering: post-fetch refinement using color/size options and local helpers.
  • Use Case: implementing category pages with dynamic filtering and responsive UI.

Quick Start

Implement server-side filtering with ProductFilterInput and ProductOrder, then enable client-side filtering with useProductFilters and the PLP components.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: filtering-system
Download link: https://github.com/saleor/storefront/archive/main.zip#filtering-system

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.