Scrolling on Touch Devices not possible!

@nicmare

It’s scrolling. Please check here: https://www.loom.com/share/41b7ac16670f4ff2a52fcf6d2cf3b833

Thank You

Yes. But just as Long as you Touch outside the Swatches! On some device screens there is no space left on Right side. So Then its very Hard to scroll!

I already tried it with my tippy tooltips disabled but its still very hard to scroll thru swatches ??

i took a look in your source code frontend.js. i think its because you just have touchstart event for mobile devices:
if (is_mobile) {
select.trigger(‘touchstart’);
}
this way, the natural scroll function for touch devices is prevented which is bad! you can not force the user to scroll on a small space next to the swatches. this is not intuitive! they need the possibility to scroll everywhere.

search for
$(this).on(‘touchstart click’
replace with
$(this).on(‘click’
in frontend.js solves the scrolling problem but then tooltips won’t work ??

• This reply was modified 5 years, 1 month ago by nicmare.

@nicmare,

Thanks for the code. I’ll notify you shortly after implementing this.

Thank you

Well Not sure if this is the best Solution as tooltip seems Not to work then. But maybe you could insert a apply_filter for the event so that anybody can change this here if they want to

I have the same problem. The buttom is too much sensitive. If you touch them to scroll page down it selects that variation. It’s bad behavior.

If you find a solution please post here.

thanks

after struggling for hours, i came across to get rid of the plugins frontend.js file and disabled it.
for gods sake this professional plugin developer has a filter for that:

// disable swatch plugin frontend(.min).js script:
add_filter("disable_wvs_enqueue_scripts","__return_true");

next i build my own slim javascript for my specific case:

$("table.variations tr").each(function(){
    var label = $(this).find(".label label");
    var labeltext = label.text();
    var select = $(this).find('select.woo-variation-raw-select');
    $(this).find("li.color-variable-item").on("mouseover",function(e){
        var title = $(this).attr("title");
        label.text(title);
    }).on("mouseleave",function(){
        label.text(labeltext);
    }).on("click",function(e){
        e.preventDefault();
        e.stopPropagation();
        var value = $(this).data('value');
        $(this).addClass("selected").siblings().removeClass("selected");
        select.val(value).trigger('change');
        select.trigger('click');
    });
});

so far it works well both on desktop and mobile. what this script does: when you hover a color swatch, it will tell the user which color/value it is, by changing the label of the attribute row. this works better for mobile user than any tooltip.

@nicmare @ricardods

We have updated our code yesterday.

Guys, could you check now?

Thank You

Thank you Sir. I installed the update. But clicking on the swatches does not work at all now?! I mean even not on desktop computer. frontend.js is loaded. no js errors in console

@nicmare

Could you disable Differ Loading from Swatches Settings >> Performance?