Real-World Examples

Explore complete implementation examples for common use cases. Each example includes component setup, configuration, and best practices.

E-Commerce Product Store

A comprehensive product filtering system with search, category filters, price range, and sorting. Perfect for online stores.

E-commerce store with product grid and filters

Complete e-commerce filtering system with sidebar filters

CMS Setup

Required CMS fields:

Title (text) - Product name
Description (text) - Product description
Price (number) - Product price
Category (enum) - Product category (Electronics, Clothing, Home, etc.)
Rating (number) - Customer rating (1-5)
InStock (boolean) - Availability status
Featured (boolean) - Featured products

Component Configuration

📦 CMSCollection Properties

Store Key: 'products'
Logic: All (AND)
Show Empty State: On
Empty State Text: "No products match your filters"
Layout Display: Grid

🔍 CMSSearch Properties

Store Key: 'products'
Search Fields: Title, Description
Placeholder: "Search products..."

🎛️ CMSFilters - Add These Filters:

Filter 1: Category

• Field: Category
• Type: Option Filter
• Style: Tags
• Show Count: On
• Logic: Any (OR)

Filter 2: Price Range

• Field: Price
• Type: Range
• Min: $0, Max: $1000
• Style: Range Slider

Filter 3: Rating

• Field: Rating
• Type: Number
• Match: Greater than or equal

Filter 4: In Stock Only

• Field: InStock
• Type: Toggle
• Style: Switch

↕️ CMSSort - Sort Options:

• Name (A-Z)
• Price: Low to High
• Price: High to Low
• Highest Rated

📊 Other Components

CMSCount: "Showing {count} of {total} products"
CMSFacets: Pill style, show search chip
CMSClearAll: "Clear All Filters"

Real Estate Listings

Property search with bedroom/bathroom filters, price range, and location search.

Real estate listing grid with property filters

Real estate filtering system with map integration

CMS Setup

Address (text) - Property address
City (text) - City name
Price (number) - Property price
Bedrooms (number) - Number of bedrooms
Bathrooms (number) - Number of bathrooms
PropertyType (enum) - House, Condo, Apartment
SquareFeet (number) - Property size

Component Configuration

🏠 CMSFilters - Property Filters

Property Type

• Type: Option Filter (auto-loads from CMS)
• Style: Tags
• Logic: Any (OR)

Price Range

• Type: Range Slider
• Min: $100,000 - Max: $2,000,000
• Step: $50,000

Bedrooms

• Type: Dropdown (1+, 2+, 3+, 4+)
• Style: Tags

Bathrooms

• Type: Dropdown (1+, 2+, 3+)
• Style: Tags

Blog/Portfolio

Content filtering by category, tags, and author with date sorting.

Blog grid with category and tag filters

Blog filtering system with featured posts and categories

CMS Setup

Title (text) - Post title
Content (text) - Post content
Category (enum) - Post category
Tags (text) - Comma-separated tags
Author (text) - Author name
PublishedDate (date) - Publication date
Featured (boolean) - Featured posts

Component Configuration

📝 CMSFilters - Blog Filters

↕️ CMSSort Options

• Newest First (by date)
• Oldest First (by date)
• Title (A-Z)

Event Directory

Event filtering by date, location, category with ticket availability.

CMS Setup

EventName (text) - Event title
Location (text) - Venue/city
EventDate (date) - Event date
Category (enum) - Music, Sports, Arts, etc.
TicketPrice (number) - Ticket cost
Available (boolean) - Tickets available

Component Configuration

🎫 CMSFilters - Event Filters

Best Practices from Examples

1. Always Use Descriptive Labels

Make filter titles clear and actionable: "Price Range" instead of just "Price".

2. Set Appropriate Logic

Use "All" logic for narrowing results (most common)
Use "Any" logic for category/tag filters to broaden results

3. Choose Right Filter Types

Range filters for price, size, ratings
CMS Enum for categories (auto-loads options)
Toggle for boolean fields
Dropdown for custom options

4. Add Supporting Components

Always include CMSCount for user feedback
Add CMSClearAll for easy reset
Use CMSFacets to show active filters
Include CMSSort for result ordering