Answer the question
In order to leave comments, you need to log in
How to simulate select select?
Hello!
I thought of replacing the standard selects of variable products with sliders in WC. Implemented.
I even hid the standard drop-down lists..
And when the value of the slider changes, the selected option in the lists also changes..
But I still can’t add it to the cart - because.. apparently.. on a guess.. activating the button only works with manual selection in the attribute lists .
It turns out that without "manual input" WC does not work either for the price or for changing the selected option
. What should I do? How to be?
jQuery.each( response, function( product, data ) {
console.log(data);
var newdiv = '<label>'+data.label+'</label><div id="attr_'+data.slug+'_slider" opt="'+data.slug+'" class="attr_slider"></div>';
jQuery('#product_attr').append(newdiv);
jQuery(document).find('select#'+data.slug+' option:contains("обычно")').prop('selected', true);
var val = data.values;
var src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCWRzdOvbe2gjvayg5POvNhLAqBt3Sen5Z4Syy1sjBYr-7Gxg&s';
jQuery(document).find('div#attr_'+data.slug+'_slider').each(function(){
jQuery(this).slider({ min: 0, max: val.length-1, value: 2 }).slider("pips", { rest: "label", labels: val }).on("slidechange", function(e,ui) {
needle_id = jQuery(this).attr("opt"); needle_val = jQuery(this).find('.ui-slider-pip-selected').text();
jQuery(document).find('select#'+needle_id+' option:contains("'+needle_val+'")').prop('selected', true);
jQuery(this).find('.ui-slider-handle').css([ val => ({ opacity: (val/100)+(val/4) }), val => ({ filter: `grayscale( (val/100)+(val/4) )` }),][this.dataset.index](ui.value));
}).attr('data-index', i => i).find('.ui-slider-handle').html(`<img src="${src}">`);
});
});
Answer the question
In order to leave comments, you need to log in
Hello Alexander
All you need to do is to add a select change event
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question