CODEWITHSUNDEEP
jquerywordpresswoocommercetouchflexslider
in2d
in2d

Reputation: 638

Turn off Woocommerce touch slider(Flexslider.js) in single product gallery

I am trying to turn of flexslider touch function on my Woocommerce single product page. I've been trying to figure out what calls the function to make the gallery slider draggable on mobile and I have found it.

I navigated to Plugins/woocommerce/assets/js/flexslider/jquery.flexslider.min.js where I changed touch:!0 to touch:!1(It's minified version of js so I changed true to false). This turns off the touch slider on mobile devices but it also returns an error in my console.

Error

[Intervention] Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Does anyone have an idea how to turn off flexslider touch functionality on mobile devices on Woocommerce single product page?

Cheers

Upvotes: 1

Views: 953

Answers (1)

Farid Rahimi
Farid Rahimi

Reputation: 61

The cause of the error is calling preventDefault() on not cancelable event. More info in this blog.

Solution

copy the content of Plugins/woocommerce/assets/js/flexslider/jquery.flexslider.js to new file. (this is the original file that is not minified)

replace this:

event.preventDefault();

with:

if (event.cancelable) event.preventDefault();

Note: you can do any extra change. (E.g. disable touch in your case)

minify the file and save it anywhere in your child theme. E.g.: your-child-theme/asset/js/my.jquery.flexslider.min.js

dequeue the old file and enqueue the new file using this code in your child theme function.php.

add_action('wp_enqueue_scripts', 'replce_flexslider_file');
function replce_flexslider_file()
{
  wp_dequeue_script('flexslider');
  wp_enqueue_script('my-flexslider', get_stylesheet_directory_uri() . '/asset/js/my.jquery.flexslider.min.js', false, '');
}

Upvotes: 1

Related Questions