fbpx
Want To Add Extra Images Per Product Variation For Free? Download Now

Issue with “Variation Swatches For WooCommerce” Plugin Not Working with AJAX

Marián Vojtko

Dear Variation Swatches For WooCommerce Support Team,

I hope this email finds you well. I am using your plugin on my website and have recently encountered an issue with the plugin not loading correctly during AJAX page load.

My website uses the WP Grid Builder plugin along with a repeater in Oxygen to display products. The setup is hooked to AJAX pagination through WP Grid Builder. I attempted to implement a code provided by the developer to properly load the variation swatches after the AJAX page load, but I’m still encountering issues.

Here is the code I’ve been working with:

window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', function( wpgb ) {

wpgb.grid.on( 'loaded', function( args ) {

$('.variations_form').each(function(){

$(this).wc_variation_form();

});

});

});

I’ve inserted this code into the repeater element JavaScript code block using the Code Snippets plugin. However, the swatches do not appear to be displaying correctly after the AJAX load.

Following some back-and-forth communication with WP Grid Builder support, they have provided me with an alternative code. But it also doesn’t seem to be working as expected. Here is their recommended code:

window.addEventListener( 'wpgb.loaded', onLoad );

function onLoad() {
WP_Grid_Builder.on( 'init', onInit );
}

function onInit( wpgb ) {
wpgb.facets.on( 'appended', onAppended );
}

function onAppended() {

if ( ! window.wc_add_to_cart_variation_params ) {
return;
}

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

Upon discussing the issue with WP Grid Builder support further, they suggested that I reach out to your team for assistance as they noted that no elements with the class name variations_form exist on my website, which is why nothing happens when the AJAX page loads.

My website can be found at https://grandesport.tempurl.host/. I would greatly appreciate your help in resolving this issue. Please feel free to let me know if there are any further details or access required to assist in diagnosing and addressing the issue.

P.S.: Variation swatches is implemented with shortcode [wvs_show_archive_variation] in archive page repeater.

Thank you for your time and assistance.

Best regards,

Marian Vojtko

Hakik Zaman

Hi Marián,

Thanks for reaching out to us. Please use the following instead of your previous code:

window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', function( wpgb ) {
   wpgb.grid.on( 'loaded', function( args ) {
      jQuery(document).trigger('woo_variation_swatches_pro_init');
   });
});

Then let me know whether it helps or not. Hope to hear from you soon.

Thank You

Marián Vojtko

Dear Hakik Zaman,

Thank you for your prompt response.

I’ve taken note of the code you’ve provided and have already implemented it on my website at https://grandesport.tempurl.host/. Unfortunately, the issue persists. I’d like to highlight that this is a similar approach to what I’ve tried earlier, as detailed in my initial message.

You can test it live on the website to see the issue firsthand.

Before I proceed further, I wanted to double-check: Is this the recommended solution given the details I’ve shared earlier? I’m asking because I want to ensure we’re not revisiting steps I’ve already taken.

Thank you for your patience and assistance.

Best regards, Marian Vojtko

Hakik Zaman

Hi Marián,

Unfortunately, the issue persists. I’d like to highlight that this is a similar approach to what I’ve tried earlier, as detailed in my initial message.

Not a similar approach. If you check my reply carefully you can understand the changes. The approach you were trying for the older versions (1.1.+ series of our plugin). Now the current versions are 2.0.24 Free and 2.0.23 Pro

We have added a dedicated trigger to reinitialize our swatches by using this: jQuery(document).trigger('woo_variation_swatches_pro_init');

I have visited your site, everything is working as expected. Even I have scrolled the page to load more products using Ajax pagination.

Please check the following screencast:

https://www.awesomescreenshot.com/video/19715587?key=213969327605f85fd675cad185423b5d

Before I proceed further, I wanted to double-check: Is this the recommended solution given the details I’ve shared earlier? I’m asking because I want to ensure we’re not revisiting steps I’ve already taken.

It depends on the Ajax pagination trigger you are using. If it is firing after new products are loaded the above trigger I have provided will work inside the Ajax pagination event.

I hope I could clear up your confusion.

Thank You

Marián Vojtko

Dear Hakik Zaman,

Thank you for your detailed explanation and taking the time to check my site. I appreciate the insights and the screencast you provided.

In the meantime, I found a solution that works even with the older version of the plugin:

window.addEventListener('wpgb.loaded', function() {
WP_Grid_Builder && WP_Grid_Builder.on('init', function(wpgb) {
wpgb.facets.on('appended', function() {
jQuery('.variations_form').each(function() {
jQuery(this).wc_variation_form();
});

if (typeof jQuery(document).trigger === 'function') {
jQuery(document).trigger('woo_variation_swatches_pro_init');
}
});
});
});

I wanted to share this with you, in case it helps in future scenarios.

Thank you for your willingness to assist.

Warm regards,

Marián

Hakik Zaman

Hi Marián,

Thanks for sharing the solution with me. Yes, that code will work for both present and previous versions.

Because you also kept the following:

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

By the way, I am very happy that your problem is resolved.

If you found our plugin helpful, could you please leave your valuable review here: https://wordpress.org/support/plugin/woo-variation-swatches/reviews/?filter=5

Your rating keeps us inspired.

Thank You