API Methods – MixItUp MultiFilter Docs

Last generated 12th February 2018

3.3.2

mixitup.Mixer

The mixitup.Mixer class is extended with API methods relating to the MultiFilter extension.

For the full list of API methods, please refer to the MixItUp core documentation.

parseFilterGroups()

.parseFilterGroups([animate] [, callback])

	Type	Name	Description
@param	boolean	[animate]	An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. `true` by default.
@param	function	[callback]	An optional callback function to be invoked after the operation has completed.
@return	Promise.<mixitup.State>		A promise resolving with the current state object.

Traverses the currently active filters in all groups, building up a compound selector string as per the defined logic. A filter operation is then called on the mixer using the resulting selector.

This method can be used to programmatically trigger the parsing of filter groups after manipulations to a group’s active selector(s) by the .setFilterGroupSelectors() API method.

Example: Triggering parsing after manually selecting all checkboxes in a group

var checkboxes = Array.from(document.querySelectorAll('.my-group > input[type="checkbox"]'));

checkboxes.forEach(function(checkbox) {
    checkbox.checked = true;
});

mixer.parseFilterGroups();

setFilterGroupSelectors()

.setFilterGroupSelectors(groupName, selectors)

	Type	Name	Description
@param	string	groupName	The name of the filter group as defined in the markup via the `data-filter-group` attribute.
@param	string, Array.<string>	selectors	A single selector string, or multiple selector strings as an array.
@return	void

Programmatically sets one or more active selectors for a specific filter group and updates the group’s UI.

Because MixItUp has no way of knowing how to break down a provided compound selector into its component groups, we can not use the standard .filter() or toggleOn()/toggleOff() API methods when using the MultiFilter extension. Instead, this method allows us to perform multi-dimensional filtering via the API by setting the active selectors of individual groups and then triggering the .parseFilterGroups() method.

If setting multiple active selectors, do not pass a compound selector. Instead, pass an array with each item containing a single selector string as in example 2.

Example 1: Setting a single active selector for a "color" group

mixer.setFilterGroupSelectors('color', '.green');

mixer.parseFilterGroups();

Example 2: Setting multiple active selectors for a "size" group

mixer.setFilterGroupSelectors('size', ['.small', '.large']);

mixer.parseFilterGroups();

getFilterGroupSelectors()

.getFilterGroupSelectors(groupName)

	Type	Name	Description
@param	string	groupName	The name of the filter group as defined in the markup via the `data-filter-group` attribute.
@return	void

Returns an array of active selectors for a specific filter group.

Example: Retrieving the active selectors for a "size" group

mixer.getFilterGroupSelectors('size'); // ['.small', '.large']