Dependent filters
There is no dependent filter work in mFilter2, because all data are selected and shown at once. However, it can be imitated with help of a special javascript.
For example, you have 2 tv parameters: brand and model of a car, where model name includes brand name.
Filter output will be like this:
modx
[[!mFilter2?
&parents=`0`
&filters=`
tv|marka,
tv|model
`
&aliases=`
tv|model==model,
tv|marka==marka,
`
&suggestionsRadio=`
tv|marka,
tv|model
`
&tplFilter.outer.model=`tpl.mFilter2.filter.select`
&tplFilter.row.model=`tpl.mFilter2.filter.option`
&tplFilter.outer.marka=`tpl.mFilter2.filter.select`
&tplFilter.row.marka=`tpl.mFilter2.filter.option`
]]
We need &suggestionsRadio for normal work of select filters.
Now we write script that will hide car models the name of which does not begin with the chosen brand:
js
var modelFilter = {
// Our selectors
options: {
marka: '#mse2_tv\\|marka',
model: '#mse2_tv\\|model',
},
// Initializing the function
initialize: function() {
$this = this;
// We get the elements we need and save them as object properties
this.marka = $(this.options['marka']);
this.model = $(this.options['model']);
// We look into parameters of the address line in search of the chosen brand
var params = mSearch2.Hash.get();
// If there is no such brand there - we turn off models
if (params['marka'] == undefined) {
$this.disableModel();
}
// If there is such brand there - we turn on models
else {
$this.enableModel();
}
// We add an operator for brand change
this.marka.find('select').on('change', function() {
// If something is selected, we turn on models
if ($(this).val() != '') {
// We switch model to the first point 'Select from the list'
$this.model.find('option:first').attr('selected', true);
// Then we activate block
$this.enableModel();
}
// If nothing is selected, we turn off models
else {
$this.disableModel();
}
})
},
// Turning off models function
disableModel: function() {
// We look for all fields with an unempty value
$this.model.find('option[value!=""]').attr('selected', false).attr('disabled', true);
// Then we hide the whole block
$this.model.hide();
},
// Turning on models function
enableModel: function() {
// We get the car brand
var marka = this.marka.find(':selected').text().replace(/\(.*?\)$/, '').replace(/\s+$/, '');
var re = new RegExp('^' + marka);
// Then we go through all models and check their names
$this.model.find('option').each(function() {
var $this = $(this);
// If the name does not fit, model should be turned off
if (!$this.text().match(re) && $this.prop('value') != '') {
$this.attr('disabled', true);
$this.hide();
}
// If it does model should be turned on
else {
$this.attr('disabled', false);
$this.show();
}
});
// Then we show the whole block with models
$this.model.show();
},
}
// Script begins to work when the document is fully downloaded
$(document).ready(function() {
// And if on the page there are filters
if ($('#mse2_mfilter').length > 0) {
modelFilter.initialize();
}
});
This script is added to a page separately and does not anyhow prevent standard script mSearch2 from working normally.
That is what you should get as a result (you can click on the GIF):