Reset other filter options when click 1 filter

Anonymous

#242607

Hi,

Is there an option I can turn on where if user chooses 1 filter, all other selected filtered reset back to original state.

Example:
1-Website has 2 radio button filters: Brand, Vintage. Starting in default position (no selection)
2-User selects option in Brand.
3-User selects option in vintage.
4-My desired outcome is at #3, the Brand filter gets reset, so shop page shows all products in vintage I selected.

Filter is not in ajax mode. Each filter is new page load.

Is this possible? My guess is there is an option which I just overlooked.
If not, I am comfortable with jquery/js. If you can point to a JS hook / API, I can handle it.

Please let me know. Thanks

Trevor

#242632

I am sorry, but there is not an option within our plugin to do this, so you would need to use JavaScript.

Anonymous

#242745

Is there an event that fires after a user clicks on a selection, but prior to the filter submitting a request?

I can attach code to that event, but I could not find a JS API in your docs.

Anything you would suggest? (Before I spend an hour trying to decipher the JS code)

Trevor

#242756

I will need to refer this to the plugin developer, Ross, for his input. Before I do that, can you confirm what you have ‘Auto Submit’ and the 2 ‘Auto Count’ settings set at (on or off for each)?

Ross Moderator

#242774

Hi there

We don’t really have a fully fledged JS API at the moment, just a few hooks to get into.

So, to get the effect you want I would:

1) disable auto submit (we’re going to implement this manually)
2) detect clicks on both fields that you have
3) submit after the clicks, and perform an action when vintage is selected

//I assume you are using a select field, change this for your field
$(document).on('change','.searchandfilter .my-vintage-field select', function(){
   $('.searchandfilter .my-brand-field select').val(''); //unset the value
   $('.searchandfilter').submit(); // submit the form, this will trigger ajax if its setup
});

$(document).on('change','.searchandfilter .my-brand-field select', function(){
   $('.searchandfilter').submit(); // submit the form / behave like auto submit
});

Of course, change .my-vintage-field select and .my-brand-field select to whatever the real CSS selector is to target your input fields…

I hope that helps.

Thanks

[Author]

Posts