JetSmartFilters API

js.md

Init event

document.addEventListener( 'jet-smart-filters/inited', function( initEvent ) {      
	console.log( 'filters init' );
} );

JetSmartFilters

There is a global JS object JetSmartFilters that gets properly inited after jet-smart-filters/inited event

document.addEventListener( 'jet-smart-filters/inited', function( initEvent ) {      
	console.log( JetSmartFilters );
} );

Some properties/methods of JetSmartFilters object that might be useful when developing some custom solution

filterGroups

in it, by the key than consists of provider/queryId, all filter goups are stored

document.addEventListener( 'jet-smart-filters/inited', function( initEvent ) {      
	console.log( JetSmartFilters.filterGroups );
} );

FilterGroup object will be described later in this document.

filterGroup

apply( method = 'ajax' ) to apply filters
resetFilters() to reset all group filters

filter

filterGroup.filters contains an array of all filters
To change and apply filter: (suppose I have a filter one of the values of which is 4)\

JetSmartFilters.filterGroups['jet-engine/filt1'].filters[0].setData(4);
JetSmartFilters.filterGroups['jet-engine/filt1'].filters[0].wasСhanged();
JetSmartFilters.filterGroups['jet-engine/filt1'].apply();

events

event bus with publish/subscribe methods
example:
ajaxFilters/updated

document.addEventListener( 'jet-smart-filters/inited', function( initEvent ) {      
	//see all events used by JetSmartFilters
	console.log( JetSmartFilters.events.channels );

	//do something on ajaxFilters/updated event
	JetSmartFilters.events.subscribe( 'ajaxFilters/updated', function( provider, queryId, response ) {
		console.log( provider, queryId, response );
	} );
} );

findFilters()

method to get filters within a certain element
example:
there is a container with class filters1, that have some filters in it

document.addEventListener( 'jet-smart-filters/inited', function( initEvent ) {
	console.log( JetSmartFilters.findFilters( jQuery( '.filters1' ) ) );
} );

Change filter value

jQuery( '#select-filter1 .jet-select__control' ).val( 52 ).trigger( 'change' );

php.md

Debug filters

Add this code https://gist.github.com/ihslimn/7b531e21728edbc489a5d031c966783c
Set filters to AJAX
Then, in Network tab in DevTools, after filtering you will be able to see how does filters request look like

Filter smart filter args

Example: set default value for the filter

add_filter( 'jet-smart-filters/filter-instance/args', function( $args ) {
	
	if ( ( int ) $args['filter_id'] !== 270487 ) {
		return $args;
	}
	
	$args['current_value'] = 2;
	
	return $args;
	
}, 9999 );

Get filters query args array

$query = jet_smart_filters()->query->get_query_args();

Filter query args array

add_filter( 'jet-smart-filters/query/final-query', function( $query ) {

	return $query;

} );

Filter checkbox/select/radio filter options

For example, modify filter options if filter title contains --mod-opt

add_filter( 'jet-smart-filters/filters/filter-options', function( $options, $filter_id, $filter ) {
	$filter_post = get_post( $filter_id );
	
	if ( ! $filter_post || false === strpos( $filter_post, '--mod-opt' ) ) {
		return $options;
	}
	
	$options = array(
		'1' => 'One',
		'2' => 'Two',
		'3' => 'Three',
	);
	
	return $options;
}, 0, 3 );

Filter meta query row

Set compare operator for Search filter, if query key contains _exact_match__

add_filter( 'jet-smart-filters/query/meta-query-row', function( $row ) {
	
	if ( false === strpos( $row['key'], '_exact_match__' ) ) {
		return $row;
	}
	
	$row['key'] = str_replace( '_exact_match__', '', $row['key'] );
	
	$row['compare'] = '=';
	
	return $row;
	
} );

Set compare operator for all Search filters

add_filter( 'jet-smart-filters/query/meta-query-row', function( $row, $query, $options ) {
	
	if ( empty( $options['filter_type'] ) || $options['filter_type'] !== 'search' ) {
		return $row;
	}
	
	$row['compare'] = '=';
	
	return $row;
	
}, 10, 3 );