PluginUs.Net - Business Tools for WooCommerce and WordPress

[realize your idea - make your dreams come true]

Support Forum

You need to log-in to create request (topic) to the support

Variation Swatches filter on archive pages

The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday. If you have problems with registration ask help on contact us page please
If you not got email within 24~36 business hours, firstly check your spam box, and if no any email from the support there - back to the forum and read answer here. DO NOT ANSWER ON EMAILS [noreply@pluginus.net] FROM THE FORUM!! Emails are just for your info, all answers should be published only here.
The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday.

We are currently facing an issue while trying to integrate"Variation Swatches for WooCommerce - Pro" with the Husky Products Filter on our WooCommerce archive pages.

The swatches load correctly on the initial document load. However, once we apply a filter and trigger an Ajax load, the swatches still load but the click events associated with the swatches don't seem to bind anymore, the image does not swap to the option we clicked on.

We attempted a solution based on the documentation provided for the plugin, using the following code snippet:

jQuery('.variations').each(function() {
    jQuery(this).wc_variation_form(); 
});

Reference: https://getwooplugins.com/documentation/woocommerce-variation-swatches/#infinite-scroll-or-ajax-load-more

Unfortunately, this solution appears to be for single-product page variations and does not resolve our issue on the archive pages. Could you provide us with guidance or an alternative approach that ensures the swatches retain their click events after an Ajax load occurs on the archive pages post-filtering?

Thank you!

Hello

After the Ajax request, you should initialize this third-party JS functionality.

for this our plugin has this option - https://share.pluginus.net/image/i20240118133800.png

In this field you should insert the JS code for initializing this function for products.

But what kind of JS code, you better ask the author of this third-party plugin

Hi, this is exactly what we did. We'll go ahead and try to contact the author of the other plugin. Can you offer any other suggestions?

Hello,

The developers of the plugin is asking for a JavaScript event after the posts are loaded.

We need an event from your filter plugin should be triggered after new posts are loaded.

Just send this link to your filter plugin developer: https://wordpress.org/plugins/malinky-ajax-pagination/

Ask them to send a trigger like the following as the Malinky Ajax Pagination plugin provides.

document.addEventListener(‘malinkyLoadPostsComplete’, function(e) {
console.log(‘LoadPostsComplete’);
});

Hi, thanks to the documentation we were able to resolve this issue.

Hello

 a JavaScript event after the posts are loaded.  - this field is for such cases -  https://share.pluginus.net/image/i20240119133342.png