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

Variation Swatches not working after Product is loaded via Ajax

Eden Brownlee

Hi support team,

First of all great plugin! However, I created a custom shortcode that would load products via AJAX using wc_get_template_part( ‘content’, ‘product’ ); however, when the products are loaded the click event on the swatches no longer work.

Please advise

Thanks

Eden Brownlee

Here’s my ajax script if needed. I think I just need the right event to trigger the variation swatches on click event on my ajax call.

<script>
(function($) {
$(document).ready(function(){

$('ul.<?php echo $custom_class;?>-list li').on('click', function(e) {

var $this = $(this); //cache selector to use in $.ajax({})

e.preventDefault();

$.ajax({
url: ajax_params.ajaxurl,
type: 'POST',
data: {
action: 'ajax_category_filter', //handler
term_id: $(this).attr('id'),
},
beforeSend: function() {
$this.find('i').addClass('visbile');
$this.find('i').removeClass('hidden');

},
success: function (result) {
$this.find('i').removeClass('visibile');
$this.find('i').addClass('hidden');
$('div#response').hide();
$('div#response').html(result);
$('div#response').fadeIn('slow');

},
error: function (errorThrown) {
console.log('error');
},
complete: function(){
}
})
});

$('ul.<?php echo $custom_class;?>-list li').on('click', function(e){
e.preventDefault();
$('ul.<?php echo $custom_class;?>-list li.active').removeClass('active');
$(this).addClass('active');
});

}); //ready
})(jQuery);
</script>

Eden Brownlee

Here’s a screen recording for some visualization

https://www.awesomescreenshot.com/video/16848154?key=a3115298da622be42a54bb22190f8ecc

I updated my code and added this snippet which I found on the public ticket forum, it now handles the click event but does not update my ‘select options’ button to ‘add to cart’.

Please advise

$(document).ready(function(){

$('ul.<?php echo $custom_class;?>-list li').on('click', function(e) {

var $this = $(this); //cache selector to use in $.ajax({})

$('.variations_form').each(function(){ //added this new code that I found in the forum
$(this).wc_variation_form();
});

e.preventDefault();

$.ajax({
url: ajax_params.ajaxurl,
type: 'POST',
data: {
action: 'ajax_category_filter', //handler
term_id: $(this).attr('id'),
},
beforeSend: function() {
$this.find('i').addClass('visbile');
$this.find('i').removeClass('hidden');

},
success: function (result) {
$this.find('i').removeClass('visibile');
$this.find('i').addClass('hidden');
$('div#response').hide();
$('div#response').html(result);
$('div#response').fadeIn('slow');

},
error: function (errorThrown) {
console.log('error');
},
complete: function(){
}
})
});

$('ul.<?php echo $custom_class;?>-list li').on('click', function(e){
e.preventDefault();
$('ul.<?php echo $custom_class;?>-list li.active').removeClass('active');
$(this).addClass('active');
});

}); //ready
})(jQuery);

Hakik Zaman

Hi Eden,

Thanks for reaching out to us. You can try your success function like this:

success: function (result) {
$this.find('i').removeClass('visibile');
$this.find('i').addClass('hidden');
$('div#response').hide();
$('div#response').html(result);
$('div#response').fadeIn('slow');
// WVS Archive Trigger
$(document).trigger('woo_variation_swatches_pro_init'); 

},

Thank You