Filter Refreshes Too Fast

Hi, when selecting items to filter by, the whole page will refresh right away. How can I configure it to pause before reloading, so that a user may click 2 or 3 items (for example, filter by red, green, blue) before being forced to wait for a reload?

Hi,

That is how WooCommerce filters widgets work. There is no way to make multiple choice first.

Regards

Hello,
I see that when selecting an item, the whole page does not reload, and instead, does some kind of ajax call to fetch products matching the new query.

Where is the code that handles the click event for those elements? Perhaps I can add code to delay 3ms before sending the query, which will reset after each filter click.

You can edit it in our theme js/functions.js. But even with the delay, it will not work as you are requesting.

Why will it not work?

Because WooCommerce filters are simple links, you can click two links at the same time.

I am planning to unassign the href attribute, and return false on click, start the timer, then build the url up based on the links the person clicks. After no clicks are seen for 3s, then load the page.

I see the links, but the page doesn’t reload. I see only the shop part reloads with ajax, so are you handling that, or is that built into wordpress? I would need to make sure it does the same ajax load.

I also do not see functions.js

I see only theme.min.js loaded inside the js folder of the basel theme dir.

I see in the minimized code you have the pjax call. I can’t find where you assemble the url to replace the current url. Can you point me to that?
Also, where can I get the non min code?

You need to disable JS minification in Theme Settings -> Performance and then customize our AJAX calls in the file js/functions.js.

Ok,
Looks like I have to use the non minified version anyway because there’s an error when using the minified version that shows up in the console.
Uncaught TypeError: a is not a function
at theme.min.js?ver=4.1.1:formatted:7211
at theme.min.js?ver=4.1.1:formatted:7209
at theme.min.js?ver=4.1.1:formatted:7210

You need to update the theme to the latest version first.

Ok I will look into it.

Where can I find your logic for creating the url for filters? For example, for an attribute called “size” and multiple selections, it might be:

“filter_size=43-5-2%2C40-2%2C42-5-2%2C42-2&query_type_size=or”

and for “simple-color”:

“filter_simple-color=black,white”

But I don’t see where the parsing code is for this?

For example, person adds a new size, filter_size query needs to update. Where does that happen?

These URLs are built in the file inc/widgets/class-widget-layered-nav.php

I am still trying to work this out and it’s proving very difficult.
You have a function: get_page_base_url( $taxonomy ) which I believe creates the url for each item in the layered nav. You then use this as a base, and then add the filter item to the url, or if it’s selected, remove from the list of filters inside the link.

What would be the best way to do the following:
1) For every filter item selected, add that item to an array
2) Have a submit button that spins off the query
3) Once clicked, it would send the list of clicked items — How can I link them up in php?
4) Returns a link to the client, which then I call pjax on to actually do the filtering.

Also, get_page_base_url( $taxonomy ) is protected. I’d like to reuse some of this code, any advice?

Sorry, but it require advanced code customization and this service is out of our theme support scope.

[Author]

Posts