CODEWITHSUNDEEP
javascriptjquerywordpresswoocommerce
evu
evu

Reputation: 1071

WooCommerce - Triggering variation select with custom select boxes

I'm trying to use FancySelect.js to style the select boxes used on WooCommerce and have managed a few but I'm struggling with the Variation form on product pages.

While FancySelect triggers a change event on the original select box, it appears to affect nothing. Looking at the javascript used in the variations form, it looks like they've unbinded the change event on the select box and are handling it some other way, by triggering events on the .variations_form instead. I can't seem to get it to work though.

My code is something along the lines of:

        $('.summary select').fancySelect().on('change.fs', function() {
            $(this).trigger('change.$');
            $('.variations_form').trigger('woocommerce_variation_select_change');
        });

I've tried triggering multiple events but none seem to have any affect.

Any ideas? Thanks.

Upvotes: 1

Views: 3934

Answers (1)

evu
evu

Reputation: 1071

So it turns out that the original trigger didn't work, for reasons I can't quite work out. However, manually triggering a change event on the original select box worked to some degree, but it wouldn't update fancySelect's "Trigger" element. I think this was because the original select's options didn't get a :selected attribute (for whatever reason). I've had to add a custom event to fancySelect to manually trigger it's updateText() method.

Updated code:

$('.summary .options li').on('click', function(){
    $('.summary select').trigger('change').trigger('select.fs');
});

And the additional event for fancySelect (which I'll try contribute to if I get chance):

sel.on('select.fs', function(){
    updateTriggerText();
});

Cheers.

Upvotes: 2

Related Questions