A
A
Alexander Sobolev2020-07-23 21:57:15
JavaScript
Alexander Sobolev, 2020-07-23 21:57:15

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?

A piece of code if needed..

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}">`);	
            
            });			    	
          });


Example in action

Answer the question

In order to leave comments, you need to log in

1 answer(s)
P
Pychev Anatoly, 2020-07-23
@san_jorich

Hello Alexander
All you need to do is to add a select change event

screen
5f19e39490d88928413890.jpeg

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question