Return to previous page

One widget area behavior being affected by a different one

This topic has 1 reply, 1 voice, and was last updated 8 minutes ago ago by Owen

Owen

Participant

October 25, 2024 at 17:18

Hi,

I’ve added to the shop sidebar widget area:
Widgets of filter products by attribute and active product filters.
I’m showing it in the left sidebar, with ajax and without being sticky.
As I haven’t added the ‘Apply all filters’ widget, this should automatically filter the products once a checkbox has been checked.
I’ve tested it and it worked perfectly.

Then I’ve also added to the Shop filters widget area:
Widgets of filter products by attribute and active product filters.
For this widget area I’ve also added the ‘Apply all filters’ widget.
The shop filters widget area is being displayed above the products and it has its filters button to open the filters list.
I’ve tested it and the filters are being applied and the products being filtered only after the ‘Apply filters’ button is being activated, as this is the intended behavior.

I need to have the filters in both the shop sidebar area and the shop filters area, as on some mobile devices there’s a need to switch between the two depending if the viewport is vertical or landscape.
I will also add display:none to each widget area based on the viewport.
When the filters are being displayed on a sidebar and mainly on a desktop they are expected usually to be applied automatically without clicking an ‘Apply’ button, so this is why I have them there without the apply button.
When the filters are being displayed on mobile, they usually being applied only after activating an ‘Apply’ button, so therefore I have it on the shop filters widget area with an Apply button.

The problem is that once the apply-filters.min.js is present (with the ‘Apply all filters’ widget added to the shop filters widget area), then the filters in the shop sidebar widget area don’t filter automatically anymore, although their function doesn’t suppose to wait for clicking on ‘Apply filters’ button (which they don’t have).
So the filters in one widget area are being affected with the behavior of the other widget area that has the ‘Apply filter’ behavior.
This is a problem as one filters display shouldn’t be affected by a separate one.

I would be thankful if you could please let me know what I can add perhaps to functions.php in order to resolve this.
Generally speaking, I’m guessing a function in apply-filters.min.js should perhaps be conditioned to apply only within the container of the relevant widget area (eg: .main-products-loop) or only if the Apply filters button (.etheme-all-filter) is actually present within the container.
Anything to fix this would be appreciated.

Thank you very much!

#420525 Copied Theme version: 9.4.2
Viewing 1 results - 1 through 1 (of 1 total)