Ajax Filter Plugin breaking JS and CSS

Hey there ! been using your theme for a while now and really enjoying most of its functionality and options !

Unfortunately, we have encountered an annoying problem with the WBW Product Filter. The filter works with Ajax and had options that made more sense than what the theme has built in.

The filter runs on both live and staging sites as for now –

When filtering the filter is breaking up the product cards CSS and also affecting the JS running on the page :
The pagination stops working [ no infinite scroll ], the sticky header menu stays in one place and the css of the product cards tends to break.

it is way easier to encounter through incognito \ guest browsing, although it happens in logged in users occasionally as well.

We tried to get support from the plugin creator. after a long email and several videos showcasing the issue, the replied that for some reason – the css and JS are kept inside the product cards div selector, so when sending the Ajax call, this area gets refreshed and all the styling is breaking up.

We have seen an advanced performance option that forces JS and CSS styles run on different pages – unfortunately, we are not sure which ones and whether it is the correct way to try and fix this issue.

the only way it works well is if I dont pick the correct selector for the product cards and the pages refreshes on the ajax call. in this case – everything works fine, but this is way slower and misses the point.
there are several different settings to the filter plugin, changing between the product categories [ we tried almost every setting possible and added video showing where it fails ].

Please, we really need the functionality and the built in filtering was not well suited for our needs.

Also, unfortunately, we currently have no dev. so while I am pretty technical, I am not really a programmer.
Also 2, if you fix it, we would love to know what has been done to do it on the live site as well [ since we dont migrate staging automatically. I copy the codes instead so we have no issues with the DB differences ].

Thank you in advance,
Igor @ Omega Sintech

I will add a link to our staging site, login info and a link to the google drive that has the videos showcasing the issue + a doc that has detailed explanation of the issue with videos etc.

Adding images to showcase the issue here.
Video clips are more detailed in showcasing the problem.

Thank you in advance <3

Attachments:

You must be logged in to view attached files.

Hello,

1. I have contacted the developer’s team and they confirm that the 3rd party plugins may not work with our load more button, so we suggest using the default pagination instead.

2. As for the CSS, it is displayed there only the first time, and all subsequent times are already in the head.

Kind Regards

Hi, I am not sure I understand what you mean by it is displayed there only the first time.
every visit from a not logged in user tends to break the css on filtering.

About the Load More – the issue is the scripts stop running when Ajax refreshes the wd-elements div.
You have a way to force scripts to keep running as far as I know, but I am not sure which scripts should I pick with the changes we have and the product cards that were chosen.

I can see the issue with the css every time I visit the website, even from logged users, though with guest users it is easier to replicate and happens more.

The plugin is using the normal pagination, if the script did not get removed on wd-elements refresh – we would have no issue.
moreover, it’s not just the pagination – sticky header stops working too.

It makes it unusable. The plugin is paid for and the only one that fit our needs and was simple enough to use.

I have not changed any pagination settings, the WBW Product Filter plugin is using the existing divs and scripts.
the issue is they stop running as soon as the filtering happens 🙁

I really need to find a way to work around it. Hoped it would be pretty simple with your amazing support

video of css and JS failing with nuances I could find :
https://drive.google.com/file/d/1Jarpp2hFxh3iAjTjEdCD9inu6Th6dEud

video of css and JS working fine when page refreshes instead of only wd-elements ajax update:
https://drive.google.com/file/d/1hX9rgw5egxV_1ZEv_WRUbSX-LVaC1z_m

there has to be a way to work around it 🙁

Hello,

1. Did you try to check how the default pagination works in this case? https://take.ms/Wn3KH6 . As I mentioned above, the load more button is not working with the 3rd party plugins, unfortunately.

2. It’s all because the page is cached in which the CSS link is in the product element, not in the header. In this case, you need to clear the cache of this page and recheck the issue.

Kind Regards

Thank you for the reply.

1. By default pagination, you mean when pages are just numbered?
We care less about the load more button, we have infinite scroll that stops working after Ajax call.
I will try to see how it works with default pagination.

2. While working on the issue, I cleared every cache related plugin.
I am also using incognito and my second browser clears local cache at shut down.
I am getting this problem from different devices, including ones that never been to our website.
There is auto clear on the cache plugin + I clear cache after every change we make to make sure I will see it…

Also, it happens on ANY shop page where i set up the plugin the same way.

I was sure we could find a way to force the CSS and scripts to run at the head of the doc with some kind of a function. It seems that BOTH the issues are connected to the same root cause – the refreshing of the wd-elements div

Hello,

1. Since this is the default functionality, it should work correctly, but if you want infinite scroll to work, you will need to contact the plugin’s tech support so they can provide you with some custom code that should be triggered after the filtered products are loaded. jQuery(document).trigger('wdShopPageInit')

2. Since you are using a third-party plugin for filters, we cannot guarantee proper compatibility with our theme. Therefore, we can offer you two options to resolve this issue:

1. Enable the Combine CSS option in the WP Rocket settings, so that all the CSS used on the page is in one file: https://monosnap.com/file/QgIC42cRxbRHiPKEVcdszXeM9HdpGb.

2. Use the following custom code in the child theme, which will load all the CSS from the theme, but this will affect the site’s performance.

add_filter('woodmart_enqueue_combined_css', '__return_true');

In both cases the problem should be solved.

Kind Regards

Thank you ! I will check this out.

I am wondering though, why I cannot find the “Combine CSS” option in WP-ROCKET on the same page…
on both live and staging.

I will update when I get the chance to check it and after I receive a reply from the plugin devs <3

Thank you a lot ! Hope it finally fixes the issue

Hello,

You are welcome!

I will wait for your response. Thank you.

Kind Regards

Hello! so after a while of trying to make it work with the plugin support here is the outcome:

Filter ID=13 , the one that works on this page : https://lmqxeoibqz-staging.onrocket.site/product-category/%D7%A6%D7%99%D7%95%D7%93-%D7%9E%D7%93%D7%A2%D7%99/
was set up with a custom JS code :

Added custom js code to filter settings:

document.addEventListener(‘wpfAjaxSuccess’, function(event) {
setTimeout(function () {
window.waypointContextKey = ”;
jQuery(document).trigger(‘wdShopPageInit’);
console.log(‘Custom js’);
}, 200);
});
The code that the theme developers gave us was not enough. We had to add another line window.waypointContextKey = ”; to force the scroll triggers to be reinitialized.
For example, we add this in the filter with ID=13 https://i.imgur.com/qCWmllr.png – this filter is on the page https://lmqxeoibqz-staging.onrocket.site/product-category/ציוד-מדעי and now Load More works on it even after filtering.

now, while the load more works and the biggest issue is over…
I have to say that
1: unfortunately, the CSS still breaks when opening the window as a guest and filtering first time.
We had a few plugin updates, so I will try and re-check the CSS generation options.
2: while the JS makes the load more script work, the sticky header menu still gets stuck on the top of the page.
Is there another script to initialize to make it work? it is not as important, and yet, it should be on the screen even if the client scrolls down.

Any tips with that?

Hello,

1. In this case, you need to connect the entire CSS from the theme because there is no other option.

2. Add the next line to your custom code: window.dispatchEvent(new CustomEvent('wdEventStarted'));

Clear the cache and check how it works.

Kind Regards

Hey, thanks !
It seems that using elementor css settings to create an CSS file is working, checking it now.

About the custom code, where do i add it ?
Is it an addition to the JS given by the plugin support?

Hello,

Yep, to the custom code that is mentioned above by you.

Then clear the cache and check how it works.

Kind Regards

just to make sure, the correct code should be:
document.addEventListener(‘wpfAjaxSuccess’, function(event) {

window.dispatchEvent(new CustomEvent(‘wdEventStarted’));

setTimeout(function () {
window.waypointContextKey = ”;
jQuery(document).trigger(‘wdShopPageInit’);
console.log(‘Custom js’);
}, 200);
});

?

Or should it be added in the end ? sorry for not being able to understand it by myself – I got a really basic knowledge in this field and our dev is unavailable

Hello,

Put it before this jQuery(document).trigger(‘wdShopPageInit’); code.

Thank you for your time.

Kind Regards

thank you so much ! everything seems to work fine ! even the CSS stays correct [ using elementor’s create CSS file + the script ].
This is amazing and the WBW filter is exactly the addition we lacked before <3

Thank you so so much !

Hello,

Great, so the topic can be closed?

Thank you for your patience.

Kind Regards

[Author]

Posts