Skip to content
mFilter
mFilter
Faceted filtering for MODX 3 with SEO URL support
  • MODX 3
  • PHP 8.1
  • Vue 3
  1. Extras
  2. mFilter

mFilterNav ​

Snippet for building SEO navigation from filter values.

Description ​

mFilterNav generates navigation menus from filter values — e.g. list of colors, brands, or categories with links to filtered pages. Parameters follow pdoMenu style for convenience.

Use cases:

  • SEO internal linking in footer or sidebar
  • Brand / vendor navigation
  • Tag clouds / attribute links
  • Link-based filters instead of checkboxes

Parameters ​

Main ​

ParameterDefaultDescription
parents0 (current)Parent resource ID
filterKeys—Filter keys to display (comma-separated)

Data source (for counts) ​

ParameterDefaultDescription
element—Snippet for getting IDs (msProducts, pdoResources)
depth10Search depth for element

Templates (pdoMenu style) ​

ParameterDefaultDescription
tplbuilt-inLink item template
tplOuter@INLINE <ul>{$output}</ul>Outer wrapper
tplGroup—Group wrapper (for grouping by filterKey)
tplHere—Active item template

CSS classes (pdoMenu style) ​

ParameterDefaultDescription
firstClassfirstFirst item class
lastClasslastLast item class
hereClassactiveActive item class
rowClass—Class for all items
outerClass—Outer wrapper class

Behavior ​

ParameterDefaultDescription
showCountfalseShow product count
hideEmptytrueHide items with count=0
sortBylabelSort: label, count, sort_order
sortDirASCDirection: ASC, DESC
limit0Item limit (0 = no limit)

Caching ​

ParameterDefaultDescription
cachefalseEnable caching
cacheTime3600Cache TTL (seconds)

Placeholders in templates ​

tpl / tplHere ​

PlaceholderDescription
{$url}Filtered page URL
{$label}Value label
{$value}Raw value
{$slug}Value slug
{$filterKey}Filter key
{$count}Product count
{$hasCount}true if count is available
{$showCount}Value of showCount parameter
{$idx}Index (from 1)
{$isActive}true if filter is active
{$isFirst}true if first item
{$isLast}true if last item
{$classNames}Combined CSS classes

tplOuter ​

PlaceholderDescription
{$output}HTML of all items
{$outerClass}Wrapper class

tplGroup ​

PlaceholderDescription
{$output}HTML of group items
{$filterKey}Filter key
{$count}Item count in group

Examples ​

Brand navigation ​

fenom
<nav class="brands-nav">
    <h3>Brands</h3>
    {'!mFilterNav' | snippet: [
        'parents' => $_modx->resource.id,
        'filterKeys' => 'vendor_id',
        'sortBy' => 'label'
    ]}
</nav>

Color navigation with count ​

fenom
{'!mFilterNav' | snippet: [
    'parents' => $_modx->resource.id,
    'filterKeys' => 'color',
    'element' => 'msProducts',
    'showCount' => true,
    'hideEmpty' => true,
    'tpl' => '@INLINE <li class="{$classNames}">
        <a href="{$url}">{$label} ({$count})</a>
    </li>'
]}

Multiple filters with grouping ​

fenom
{'!mFilterNav' | snippet: [
    'parents' => $_modx->resource.id,
    'filterKeys' => 'brand,color,size',
    'tplGroup' => '@INLINE <div class="filter-group">
        <h4>{$filterKey}</h4>
        <ul>{$output}</ul>
    </div>',
    'tplOuter' => '@INLINE <div class="filter-nav">{$output}</div>'
]}
fenom
{'!mFilterNav' | snippet: [
    'parents' => $_modx->resource.id,
    'filterKeys' => 'brand',
    'element' => 'msProducts',
    'showCount' => true,
    'sortBy' => 'count',
    'sortDir' => 'DESC',
    'limit' => 10
]}

Horizontal menu ​

fenom
{'!mFilterNav' | snippet: [
    'parents' => $_modx->resource.id,
    'filterKeys' => 'category',
    'outerClass' => 'nav nav-pills',
    'rowClass' => 'nav-item',
    'hereClass' => 'active',
    'tpl' => '@INLINE <li class="{$classNames}">
        <a class="nav-link{if $isActive} active{/if}" href="{$url}">{$label}</a>
    </li>'
]}

Custom active item template ​

fenom
{'!mFilterNav' | snippet: [
    'parents' => $_modx->resource.id,
    'filterKeys' => 'color',
    'hereClass' => 'is-selected',
    'tplHere' => '@INLINE <li class="{$classNames}">
        <span class="current">{$label}</span>
    </li>'
]}

Alphabetical index ​

fenom
{* Sort by name *}
{'!mFilterNav' | snippet: [
    'parents' => $_modx->resource.id,
    'filterKeys' => 'brand',
    'sortBy' => 'label',
    'sortDir' => 'ASC',
    'outerClass' => 'brand-index'
]}

SEO use ​

fenom
<footer>
    <div class="footer-links">
        <div class="footer-col">
            <h4>Popular brands</h4>
            {'!mFilterNav' | snippet: [
                'parents' => 5,
                'filterKeys' => 'vendor_id',
                'limit' => 10,
                'sortBy' => 'count',
                'sortDir' => 'DESC',
                'element' => 'msProducts'
            ]}
        </div>
        <div class="footer-col">
            <h4>By color</h4>
            {'!mFilterNav' | snippet: [
                'parents' => 5,
                'filterKeys' => 'color',
                'element' => 'msProducts',
                'hideEmpty' => true
            ]}
        </div>
    </div>
</footer>
fenom
<aside class="catalog-sidebar">
    {* Main filter form *}
    {'!mFilterForm' | snippet}

    {* Extra link-based navigation *}
    <div class="sidebar-links">
        <h4>Quick select</h4>
        {'!mFilterNav' | snippet: [
            'filterKeys' => 'brand,color',
            'limit' => 5,
            'showCount' => true,
            'element' => 'msProducts'
        ]}
    </div>
</aside>

mFilterForm vs mFilterNav ​

mFilterFormmFilterNav
Interactive formStatic links
Checkboxes, slidersLinks only
AJAX updateURL navigation
Combine filtersOne filter per link
For usersFor SEO / navigation

Recommendations ​

  • Use hideEmpty to hide empty values
  • element is only needed when using showCount or hideEmpty
  • For SEO navigation, caching (cache => true) is recommended
  • Use limit for long lists