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

After I update both free and pro version from 1.3.x to 2.0.3, swatch does not work on archive page.

Brain Shi

You can see a lot of JS errors in my console log. This is very annoying…

 

Brain Shi

If this issue cannot be solved in a short time. Can you please send me the last version of 1.x? I need the site be stable in first.

Hakik Zaman

Hi Brain,

Will you help us to reproduce your issue or our staging site?

Please let me know your thought. Then I can create a staging site for you.

In the meantime, you can roll back to the 1.1.19 version for free and to the 1.1.18 version for the premium versions. Here is the tutorial on how you can rollback: https://www.loom.com/share/2d8bc9351e864e1d964e319e27564250

Please download the 1.1.18 pro version for Variation Swatches For WooCommerce from here: https://drive.google.com/file/d/1owFKhXBkc9G2Rv2pS0GyQqMdEVh-ppx8/view?usp=sharing

Thank You

Brain Shi

Ok, Thanks.

I have rolled back to 1.1.19/1.1.18 versions on my production site and it is now working well:
https://www.jimhaloeyewear.com/product-category/eyeglasses/

I have installed the newest versions on my staging site, you can see the differences and errors in the console pannel
http://jimhalo.becomingjenny.net/product-category/eyeglasses/

There is one more issue i just noticed:
The new version doesnot add swatches in this template code when I trying to do it in AJAX request:

wc_get_template_part( ‘content’, ‘product’ )

To reproduce this issue, you can compare the difference when do some search or filting on my archive pages between my production site and staging site.

Hakik Zaman

Hi Brain,

Can you set up the same issue on our staging? So that our development team can look into it.

Hope to hear from you soon!

Thank You

Brain Shi

Hi Hakik

Yes, we can have a try. But how?

Hakik Zaman

Hi Brain,

It’s a development local site, please login here and set up your theme. And try to reproduce your issue here.

https://wptestbox.com/114459/wp-admin/

Username: admin

Password: demo

Note: I have added the necessary plugins and sample products for you.

Thank You

Brain Shi

I have uploaded my theme to the staging environment. However it seems admin-ajax.php requests is not working in this development site. They are returning 400 errors.

But the Javascript errors on archive page is from frontend-pro.min.js . those have nothing to do with the Ajax errors. You can reproduce it on this url:

https://wptestbox.com/114459/?product_cat=eyeglasses

 

Brain Shi

Those 400 errors form admin-ajax.php are fixed on this development site. So you can try the filter on archive page now.

Hakik Zaman

Hi Brain,

Please test the staging site using version 2.0.6 and let me know if it resolves your issue or not.

Thank You

Brain Shi

Hi Hakik,

Thanks for the updating. However it doesnot 100% reolve my issue under the newest version.

It seems the swatches is showing by Ajax requests in the template code, which is good:
wc_get_template_part( ‘content’, ‘product’ )
But when click the swatches, the product images are not switching.

The default shop/archive pages are good. I mean the Ajax requested wc_get_template_part( ‘content’, ‘product’ ) template is not. Swatches (and the clean buttons) are not clickable under that scenario.

You can still reproduce this issue on this url https://wptestbox.com/114459/?product_cat=eyeglasses
See the first product – ‘Hollis’ , its swatches are working fine in the very first time. When you click the search button on the filter,  if Hollis is display again, its swatches are not clickable any more.

 

 

Brain Shi

I guess some Javascript code should run again after the AJAX request, but I don’t know what it should be. Can you please check again?

Thanks!

Hakik Zaman

Hi Brain,

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

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

And ask them to send triggers like the following as the Malinky Ajax Pagination plugin provides.
document.addEventListener(‘malinkyLoadPostsComplete’, function(e) {
console.log(‘LoadPostsComplete’);
});

Like this filter plugin: https://woocommerce.com/products/product-filters/
jQuery(document).ready(function( $ ){
// Your code in here
jQuery(window).on(‘wcpf_update_products’, function () {
console.log(‘Hi’);
});
});

Thank You

Brain Shi

Hi Hakik,

Myself is the filter developer.
I have added this line to the Ajax request success function:

console.log('LoadPostsComplete');

So run the filter you will see this console log in browser.

It is in line 176 in the [theme_path]/woocommerce.php file. You can easily find it. If there is further infomation you need to know, please ask me directly.

Thanks and hope a good day to you!

 

Hakik Zaman

Hi Brain,

We need the trigger. Which you used after new products load.

Here is an example of code to load Swatches Pro correctly:

$(document).on('YOUR_TRIGGER_WILL_BE_HERE', function () {
   $(document).trigger('woo_variation_swatches_pro_init');
});

Thank You

Brain Shi

Hi Hakik,

I did not create the trigger in my JS code. However this line is exactly what I need to add to my theme.

$(document).trigger('woo_variation_swatches_pro_init');

I think this is done. Thanks!

I guess you need to add this to your documents for developers.

Hakik Zaman

Hi Brain,

Glad to know my example was helpful to you.

Thanks for your suggestion. I will forward it to our Research Team to add this to our developer doc.

We really get excited & honored when you use our plugin on your site.

If you found my support 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