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

Can’t View Variations after filtered products are displayed by Ajax.

David Sparks

Anytime I use a filtered results display on my shop page the swatches display but clicking on them does not change the image. Am I doing something wrong?

Golam Kibria

Hi David,

Thanks for reaching us.

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 trigger like 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’);
});
});

Which plugin are you using for Ajax filtering or does it come from your theme?

Thank You

David Sparks

I think there is a misunderstanding. We dont have a plugin developer. I am using mainstream product filters available through the plugin store. The current one that is active is “Product Filter by WooBeWoo” and before that I was trying “annasta Woocommerce Product Filters”. The error occurs regardless of which filter I am using.

 

Golam Kibria

Hi David,

Please ask the author/support of Product Filter by WooBeWoo plugin, if they have any trigger when new posts are loaded by Ajax after the filter.

Once you get the trigger, we will add a snippet to your site to make this work.

You can also share my previous response with them, they will understand what needs to be done.

Thank You

David Sparks

I actually switched to a different plugin but same issue. This is their response:
Thank you for your interest in our WooCommerce filtering plugin!

Please tell the developer who wishes to re-bind his JS functionality to the AJAX-loaded filtered products to create a listener for the awf_after_ajax_products_update event.

If it is no trouble for you or the 3d party developer, we would really appreciate it if you could share the eventual solution. We’d add it to our library of useful scripts that we freely share with our users running into identical issues.

Golam Kibria

Hi David,

Can you please give us temporary admin access to your site? We’ll try to implement a solution for you.

You can add new users by going to Users > Add New set the user and password for us, set the role to admin and set the info here.

And add your site URL, login username, and password in the site login area. Follow this guideline: https://www.useloom.com/share/27c1f2ac633c4060b2da883d946107d7

Hope to hear from you soon!

David Sparks

I am a developer by trade. Can you let me know what code you would like to put in – I can do it on my end?

 

Golam Kibria

Hi David,

Try adding this snippet to your child theme’s functions.php. You can also try the Code Snippets plugin or alternative options.

add_action( 'wp_footer', 'dev_david_sparks_filter_plugin', 99 );
function dev_david_sparks_filter_plugin(){
?>
<script id="awf_after_ajax_products_update">
jQuery('body').on('awf_after_ajax_products_update', function(){
jQuery(document.body).trigger('woo_variation_swatches_pro_init');
});
</script>
<?php
};

Let us know if this works.

Thank You

David Sparks

That did not work – that script only runs on initial load.

 

 

David Sparks

Checking in to see what you would like me to try next.

Golam Kibria

Hi David,

Please verify with your filter plugin if they have provided the right trigger.

Also, try clearing the cache (site, browser & server! if any).

How are you adding the code? Code Snippet or Child theme (try switching methods)!

Thank You

David Sparks

Cache is cleared- I put an alert in the function just to make sure it’s being called correctly and that works. I have tried both child theme and Code snippet and no luck with either one.

Golam Kibria

Hi David,

Please help us replicate the issue by installing the filter plugin on the site below:

https://wptestbox.com/127790/wp-admin/
User name: admin
Password: Q1eGW8rs$Lpw#mP#hg

Let us know once you are done.

Thank You

David Sparks

It is installed and in the sidebar on the shop page.