mFilter

Faceted filtering of products and resources for MODX Revolution 3.x with SEO-friendly URL support.

Features

• Faceted filtering — filter by any resource fields, TV, MiniShop3 options
• SEO URL — human-readable URLs like /catalog/brand_apple/color_black/
• Cross-filtering — count available values based on active filters
• AJAX — update results without page reload
• Headless API — REST API for integration with Vue, React, Svelte
• SEO optimization — dynamic title, description, H1, canonical
• Word forms — word forms for filter names in SEO text
• Integration — works with MiniShop3, mSearch, pdoTools
• Vue interface — modern admin panel on Vue 3 + PrimeVue

System requirements

Requirement	Version
MODX Revolution	3.0.0+
PHP	8.1+
MySQL	5.7+ / MariaDB 10.3+

Dependencies

• pdoTools 3.x — for snippets and Fenom
• VueTools — for the manager UI
• MiniShop3 (optional) — for product filtering

Installation

Via package manager

1. Go to Extras → Installer
2. Click Download Extras
3. Find mFilter in the list
4. Click Download then Install

After installation:

1. Go to Extras → mFilter → Filter sets
2. Create a filter set for your catalog
3. Add snippets to the catalog page

Quick start

1. Create a filter set

In Extras → mFilter → Filter sets:

• Create a new set
• Add the filters you need (MS3 options, TV, resource fields)
• Link to catalog categories

2. Add snippets to the page

{* Filter form *}
{'!mFilterForm' | snippet}

{* Paginated results *}
{'!mFilter' | snippet: [
    'element' => 'msProducts',
    'paginator' => 'pdoPage',
    'parents' => $_modx->resource.id,
    'limit' => 24,
    'tpl' => 'mfilter.row'
]}

{* Pagination *}
{$_modx->getPlaceholder('page.nav')}

3. SEO URL (optional)

SEO URLs are on by default. Filters produce URLs like:

/catalog/brand_apple/color_black-or-white/price_1000-5000/

To customize, go to Filter sets and set slugs for filter values.

Architecture

┌─────────────────────────────────────────────────────────┐
│                      Front-end                           │
├─────────────────┬───────────────────────────────────────┤
│   SSR mode     │           Headless mode              │
│  (mFilterForm)  │        (Vue/React/Svelte)             │
├─────────────────┴───────────────────────────────────────┤
│                    JavaScript API                        │
│         FilterUI / ApiClient / FilterAPI / Hooks         │
├─────────────────────────────────────────────────────────┤
│                      REST API                            │
│    /api/v1/filter/schema | apply | suggestions | ...     │
├─────────────────────────────────────────────────────────┤
│                       Services                            │
│  Filter | FilterSet | SlugManager | UrlRouter | SEO...   │
├─────────────────────────────────────────────────────────┤
│                     Database                          │
│   FilterSets | Slugs | Patterns | WordForms | Cache      │
└─────────────────────────────────────────────────────────┘

Differences from mFilter2

mFilter is a fully rewritten component for MODX 3.x:

Aspect	mFilter2	mFilter
MODX	2.x	3.x
PHP	5.6+	8.1+
Interface	ExtJS	Vue 3 + PrimeVue
Architecture	Procedural	Service-based
SEO URL	Separate plugin	Built-in
Headless API	No	REST API v1
Filter types	Fixed	Extensible
Configuration	In snippet	Filter sets in admin
Caching	Basic	Multi-level

Operating modes

SSR (Server-Side Rendering)

Traditional mode — HTML is generated on the server:

{'!mFilterForm' | snippet}
{'!mFilter' | snippet: ['element' => 'msProducts']}

Advantages:

• Works out of the box
• SEO-friendly
• No JavaScript required for first load

Headless (for SPA)

API mode for modern frameworks:

// Get filter schema
const schema = await mfilter.getSchema(resourceId);

// Apply filters
const result = await mfilter.apply(
    { brand: ['apple'], price: { min: 1000, max: 5000 } },
    { sort: 'price-asc', page: 1 }
);

More: Headless API