Apply filters in modal

#wpgridbuilder I have an Oxygen repeater with Gridbuilder filters. That’s ok for desktop, however, on mobile I use a modal that uses the same filters. The “problem” is that the filters still immediately take effect.

What I would rather want is to place a button with “show results” that filters the repeater only when clicked. Is this possible, because I’m not seeing any options out of the box? I have it now, but it takes away the automatic hierarchy that the filters have, which renders that feature almost pointless.

If I don’t do it this way and one would close the modal while having clicked some filters, the filters would be applied possibly without the user knowing this. To remove them the user would then have to go back to the modal. It’s bad UX.

Here’s a link to my staging site:

I think you would have to do this using some JS.

You could have the apply button still added on desktop. Hide the button from display. Then use a bit of JS to trigger the button using onchange. Bit of a weird work around but this seems the simplest way to impliment it.

When on mobile. You wouldn’t want the button to be triggered every time someone changes an option. So you would impliment something like this inside your trigger code.

if (window.innerWidth > 460) { // the same breakpoint you use for your modal to appear

Then you can have the button trigger the update when it’s on mobile.

PS. This is just my logic behind it but I think it could be done this way.

It may be worth looking at this page: I think you can use these methods to update the facets / grid using js directly: Facet methods - Gridbuilder ᵂᴾ

Edit: Another workaround could be. Have your modal bg opacity 50% or something along those lines. Then it is extremely visible to see the updates happening on the fly. Your users will be aware but I agree the other way would be much better for ux.

Can’t imagine I’m the first one running into this problem. I mean, basically, everyone would need a mobile solution for multiple filters, right? Googled my ass off though, can’t find anything.

The apply button is already there, but it messes up the hierarchy before clicking it. So it would turn into a confusing / un-intuitive filter system. The problem is my javascript knowledge is nonexistent. Might be something to work on, but as of now, I’ve got nothing.

I don’t really like the second suggestion to be honest :slight_smile:

Agreed Joe,

I will have a little play with this later and see if I can get something worthwhile. I’ve been consistently looking for wpgrid tutorials and taking in any information I can. You’re completely right it’s like there is no tutorials out there for this stuff so I know where you are coming from. I think the issue is most people will either use the apply button or not use on at all. See what I can do :slight_smile:

I would be tempted to get in touch with wpgrid builder (I think they have a git - possibly add a wishlist). I would imagine some people have already requested this feature as it absolutely makes the best sense to do things like this.

1 Like

At this point, I’ve made a “show results” button, which is effectively a close button - as well as a cross in the top corner that does the same. Probably create a “clear filters” button on the site outside of the modal as well. This is the best solution I can think of at this point. Curious to see if you can come up with something.

As I said, I def need to up my JS game, but there’s so much stuff I still need to finish up and polish up.