Two lightweight companion filter controls for Etch. SN Simple Facet gives you buttons or a dropdown for exact-value matching, SN Simple Search Facet gives you a text input for substring matching. Both show and hide items already on the page, no database queries, no page reload, no AJAX.

The upside is speed and simplicity. Since both are just showing and hiding elements already rendered on the page, filtering is instant, there’s no server round trip and no loading state to build. Setup for either one is a couple of props, no JavaScript required.

The tradeoff is that they only work for content you’re already rendering. There’s no pagination, no result counts, and nothing gets queried from the database, so they don’t scale to large catalogs or content you’d normally paginate. They’re also not built for search relevance or complex filtering logic, just straightforward matching against what’s already on the page.

So if you’ve got a smaller set of items already on the page and want a fast way to let visitors filter or search them, these are a good fit. If you’re dealing with a large dataset, need pagination, or want actual faceted search with result counts, grab a real faceted search plugin like FacetWP or WP Grid Builder instead.

SN Simple Facet

How It Works

1. Each item in your grid (cards, photos, whatever) carries a data-* attribute with a category value, like data-category="drone".
2. Drop SN Simple Facet above the grid.
3. Fill in the Facets repeater, one row per button or dropdown option, each with a Label (what visitors see) and a Value (what it matches against).
4. Clicking a button, or picking a dropdown option, hides every item whose value doesn’t match.

Props

Example Use Case

Filtering a client portfolio by project type, with a URL param so visitors can share a filtered view:

• Target Selector: .portfolio-grid
• Data Attribute: service
• Facet Type: Dropdown
• URL Param: service
• Facets:

Each project card in .portfolio-grid needs data-service="web-design" (etc.) set on it. Since URL Param is set, picking Branding from the dropdown updates the URL to ?service=branding, so if someone bookmarks that link or you share it directly, the page loads with that filter already applied.

SN Simple Search Facet

How It Works

1. Drop SN Simple Search Facet above the grid of items, no data-* attribute setup required.
2. As the visitor types, it checks each item’s text content against the typed text (case-insensitive, substring match) and hides anything that doesn’t match.
3. Clearing the input shows everything again.

Props

Example Use Case

Searching a team directory by name or role, scoped so the search only matches visible name and title text and not a hidden department tag on each card:

• Target Selector: .team-grid
• Content Selector: .team-card-name, .team-card-title
• Placeholder: Search team members...

Typing design would match a card titled “Lead Designer” without also matching cards that happen to carry a hidden Design department tag elsewhere in the markup.

Using Multiple Facets on the Same Grid

You can also point an SN Simple Facet and an SN Simple Search Facet at the same Target Selector and they combine -> an item only stays visible if it matches both the active facet and the current search text. So Interview selected plus typing team narrows down to interview videos whose text also contains team, not just whichever filter was touched most recently.

This works because they don’t fight over each item’s visibility directly. Instead, each instance registers its own match rule with a small shared coordinator (window.SnFilterHub) the first time it runs, and re-checks with that coordinator every time its own state changes. The coordinator hides an item unless every registered filter says it’s a match.

This also means you can stack more than two, for example two SN Simple Facets (say, category and status) plus a search box, all on the same grid, and they’ll all combine the same way.

You don’t need to configure anything for this. Just add multiple instances with the same Target Selector and it works automatically.

Styling

Both components’ inputs and buttons use ACSS’s own .btn--primary class, so they automatically match your site’s real button look, padding, border radius, font, transitions, all pulled from your ACSS button tokens instead of hardcoded values.

On top of that, a small class per element (.sn-facet-pill, .sn-facet-select, .sn-search-input) redefines just the color-related ACSS button variables (--btn-background, --btn-text-color, --btn-border-color, and their -hover variants):

• SN Simple Facet, idle button: transparent background, primary-colored text and border, an outline look.
• SN Simple Facet, active button (aria-pressed="true"): filled with your primary color.
• SN Simple Facet, dropdown: styled like an idle button at all times, no active/inactive state to show.
• SN Simple Search Facet, input: styled like an idle button at all times.

Because this only redefines ACSS’s own --btn-* variables rather than replacing the button styling outright, any other customization you’ve done to .btn--primary (shadows, custom radius, whatever) carries through automatically. If you want a different look, say a secondary color instead of primary, just edit the CSS on the relevant .sn-* class in the Style Manager. Everything reads from those.

Notes

• Works with any HTML element as an item, divs, figures, cards, component instances, as long as it’s a direct child of the Target Selector container.
• More than one instance can be used on the same page. Point them at different Target Selectors to filter separate grids independently, or the same Target Selector to combine them (see “Using Multiple Facets on the Same Grid” above).
• SN Simple Facet: if nothing seems to be filtering, double check the Data Attribute value matches exactly what’s on your items (case-sensitive), and that Target Selector actually matches the grid container.
• SN Simple Search Facet: if search isn’t finding an item you expect, check whether Content Selector is scoping the search too narrowly, leave it blank to search everything in the item.