Skip to content
  1. Extras
  2. simpleFilters

simpleFilters

Simple filtering for MODX 3 resources and MiniShop3 products. Install from the repository via the MODX 3 package installer.

Main features

  • Resource fields, TVs, and MIGX fields; MiniShop3 product fields and options.
  • Works with standard MODX tables or a dedicated index table.
  • AND / OR logic.
  • Filter types: checkbox, radio, select, numeric slider (via noUiSlider).
  • URL aliases for filters.
  • Pagination (paged and “load more”).
  • Sorting and page size options.
  • System events for fine-tuning (filter labels, values, field order, etc.).

System settings

ParameterDescriptionDefault
sf_index_templatesResource templates whose fields should be indexed
sf_index_fieldsResource fields to index
sf_js_pathPath to JS file relative to site root{assets_url}components/simplefilters/js/web/default.min.js
sf_css_pathPath to CSS file relative to site root{assets_url}components/simplefilters/css/web/default.min.css

Getting started

Indexing fields and values

By default the component uses table modx_sf_index with precomputed field values for faster queries.

Fill sf_index_templates and sf_index_fields: templates that participate in filtering and fields to index.

Prefixes:

  • Resource field — no prefix
  • TV — tv_
  • MIGX field — migx_
  • MiniShop3 product field — ms_
  • MiniShop3 product option — mso_

Example: MiniShop3 is installed, product templates 4 and 5, filter by price, vendor, “new”, color, material option, stock TV, and MIGX “Height” from TV chars (title / value):

Set sf_index_templates to 4,5 and sf_index_fields to:

ms_price,ms_vendor_id,ms_new,ms_color,mso_material,tv_instock,migx_chars_Height:title|value

Then either:

1. Run from console:

php
<?php
$sf = $modx->getService('Simplefilters');
$sf->updateIndexAll();

2. Call snippet simpleFiltersUpdate once on any page (ships with the package).

Index on resource save

Automatic via plugin simpleFilters on onDocFormSave.

Scheduled indexing

Use CronManager or Scheduler. Add snippet simpleFiltersUpdate to a task and set the schedule.

Indexing after import

With Impex3, add a plugin on OnImpexAterAllImport:

php
switch ($modx->event->name){
    case 'OnImpexAterAllImport':
        $sf = $modx->getService('Simplefilters');
        $sf->updateIndexAll();
    break;
}

For the built-in MiniShop3 CSV import, do the same on msOnAfterImport:

php
switch ($modx->event->name){
    case 'msOnAfterImport':
        $sf = $modx->getService('Simplefilters');
        $sf->updateIndexAll();
    break;
}

Working without the index

If there are few resources/fields or you cannot maintain the index, switch to direct table queries by passing &fromIndex=0`` in the snippet call.

simpleFilters snippet

Outputs resources, filters, and loads scripts and styles.

Parameters

ParameterDescriptionDefault
&parentsParent IDs for selection, comma-separatedCurrent resource
&resourcesResource IDs, comma-separated
&showUnpublishedInclude unpublished resources0
&templatesTemplate IDs, comma-separated
&fromIndexRead from index table1
&whereInitial selection (JSON)
&sortbySort fieldmenuindex
&sortdirSort directionASC
&limitItems per page10
&includeTVsTVs to include in output, comma-separated
&tvPrefixPrefix for TVs in resource chunktv_
&msPrefixPrefix for MiniShop3 product fieldsms_
&msoPrefixPrefix for MiniShop3 product optionsmso_
&hideOneHide filters with a single value1
&checkEmptyEvaluate each filter value to disable inactive options0
&filtersFilters as field1:type1,field2:type2
&aliasesURL aliases field1==alias1,field2==alias2
&fseparatorSeparator for filter values in URL_
&modeand — all conditions, or — any conditionor
Templating
&tplResource chunk
&tplWrapperFull output wrappersf_wrapper
&tplFilterCheckbox/radio filter blocksf_filter
&tplFilterRowCheckbox rowsf_filter_row
&tplFilterRadioRowRadio rowsf_filter_radio_row
&tplFilterSelectSelect blocksf_filter_select
&tplFilterSelectRowSelect option rowsf_filter_option_row
&tplFilterSliderSlider blocksf_filter_slider
&tplSelectedSelected filters blocksf_selected_filter
&tplSelectedRowSelected filter rowsf_selected_row
Pagination
&tplPaginationWrapperPagination wrappersf_pagination
&tplPaginationPage linksf_page
&tplPaginationFirstFirst page linksf_page_first
&tplPaginationLastLast page linksf_page_last
&tplMoreButton“Load more” buttonsf_morebutton

Configuring filters

In &filters use these prefixes:

  • Resource field — no prefix
  • TV — tv_
  • MIGX field — migx_
  • MiniShop3 product field — ms_
  • MiniShop3 product option — mso_

Types:

  • Checkbox — checkbox or leave empty
  • Dropdown — select
  • Slider — slider
  • Radio — radio

Example filters and URL aliases:

&filters=`
    parent:select,
    ms_vendor_id:select,
    ms_price:slider,
    tv_instock:slider,
    migx_chars_Height:slider:title|value,
    ms_color,
    ms_tags:select
`
&aliases=`
    ms_vendor_id==brand,
    ms_price==price,
    tv_instock==instock,
    migx_chars_Height==height,
    ms_color==color,
    ms_tags==tags
`

MIGX fields

Format:

migx_[tv name]_[parameter name]:[filter type]:[label field]|[value field]

Example MIGX TV chars:

json
[{"fields":
  [
    {"field":"title", "caption":"Parameter"},
    {"field":"value", "caption":"Value"}
  ]
}]

Example product values:

MIGX values

Slider for “Height”:

migx_chars_Height:slider:title|value

Checkboxes for “Purpose”:

migx_chars_Purpose:title|value

In sf_index_fields, always without filter type:

migx_chars_Purpose:title|value,migx_chars_Height:title|value

&where parameter

Supports one parameter/value. Works only with resource and MiniShop3 product tables (field names as in the database, no prefixes).

DescriptionExample
New items only'where' => '{"new":"1"}'
Products with price > 2000'where' => '{"price:>":"2000"}'
Resources with "sale" in longtitle'where' => '{"longtitle:like":"sale"}'

Templating

Default chunks use Fenom (requires pdoTools); standard syntax is also supported.

Use custom chunks per filter with &tplFilter_field and &tplFilterRow_field.

Example for ms_tags:

&tplFilter_ms_tags=`block_chunk`
&tplFilterRow_ms_tags=`row_chunk`

If an alias is set, use the alias name:

&aliases=`ms_tags==tag`
&tplFilter_tag=`block_chunk`
&tplFilterRow_tag=`row_chunk`

Block titles use lexicon keys sf_filter_filter_name (or the plugin).

JavaScript

To submit the form use sf.submit:

js
sf.submit();

After data refresh the sfilters event fires:

js
document.addEventListener('sfilters', (e) => {
    // console.log(e);
});

System events

All events receive an array $data.

EventDescription
sfOnGetIdsFired after initial collection of displayed resource IDs. You can add a resource by ID or replace the whole set.
sfOnGetFilterValuesFired after filter values are built. Receives array of values (e.g. to sort), filter name and type.
sfOnBeforeCreateFilterRowFired when a filter row is created. You can change labels, values, etc.
sfOnBeforeCreateFilterFired when a filter block is created. You can change block title, slider range, etc.
sfOnCheckResourceFired when checking a resource against a selected filter value. Receives resource id, filter name, value. To include the resource, set $data['result'] = true;

See core/components/simplefilters/docs/pluginExamples.md for event examples.