Docs

[seppeg]

Dear,

Since updated X from 4.2.2 to version 4.4.1 we had problems with the tabs in Woocommerce. On mobile they where not working anymore and at desktop they caused scrolling disorder. To make that last one clear I made a movie from it: https://www.dropbox.com/s/2jqs0e61iw86wm6/blocking-scroll-tab-1.mov?dl=0

I found out that there is a conflict with the scroll trigger. After changing following code in x-body.js and minifing to x-body.min.js it worked again like before smoothly on desktop and clickable again on mobile devices.

Location of the javascript src = /themes/x/framework/js/dist/site/x-body.js

/* CODE OF V4.4.1 WHICH IS CAUSING PROBLEMS */

//
// Scroll trigger.
//

$('a[href*="#"]').on('touchstart click', function(e) {
  href        = $(this).attr('href');
  notComments = href.indexOf('#comments') === -1;
  if ( href !== '#' && notComments ) {
    var theId = href.split('#').pop();
    var $el   = $('#' + theId);
    if ( $el.length > 0 ) {
      e.preventDefault();
      animateOffset($el, 850, 'easeInOutExpo');
    }
  }
});

/* CHANGED BY THIS CODE FROM V4.2.2 */

//
// Scroll trigger.
//

$('a[href*="#"]').on('touchstart click', function(e) {
$href            = $(this).attr('href');
notComments      = $href.indexOf('#comments') === -1;
notAccordion     = $href.indexOf('#collapse-') === -1;
notTabbedContent = $href.indexOf('#tab-') === -1;
if ( $href !== '#' && notComments && notAccordion && notTabbedContent ) {
  var theId = $href.split('#').pop();
  var $el   = $('#' + theId);
  if ( $el.length > 0 ) {
    e.preventDefault();
    animateOffset($el, 850, 'easeInOutExpo');
  }
}
});

I had the problems running on website https://tuincentrumbaeten.be

Could you fix this issue in future updates?

Best regards, Seppe Gadeyne

[Nico]

Hi There,

Thanks for writing in.

I will forward this thread to our developers so that they will include the fix on the next updates.

Thank you so much for understanding.

[seppeg]

Thanks a lot Nico!

[Nabeel A]

You’re welcome 🙂

[launchcatapult]

Is there a way I can apply this without Modifying X core or has there been a fix released for this yet?? My tabs are behaving EXACTLY as your are in the video and not working in mobile.

I have WordPress 4.5 and latest version of X, Cornerstone and WooCommerce. I tried rolling back WooCommerce to no avail and deactivating all plugins etc.

I would rather not over-write or hack something together in customizer but be able to permanently put a fix in place for this.

[Zeshan]

Hi there @launchcata,

Thanks for writing in!

You can fix this issue temporarily using following code under Custom > JavaScript in the Customizer:

jQuery(function($) {
  $('.x-nav-tabs>li>a').off('click touchend touchstart');
});

Hope this helps. 🙂

Thank you!

[launchcatapult]

Perfect…thank you!

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[tahaabbasi]

Hello,

I just want to know if this was addressed in the 4.5.0 to 4.5.2 releases? So I can remove:

jQuery(function($) {
  $('.x-nav-tabs>li>a').off('click touchend touchstart');
});

from my functions.php file.

[Rupok]

Hi there,

Thanks for updating. Kindly keep the code for now. It’s need to be fixed from WooCommerce end and I think it’s not fixed yet.

Cheers!

[Author]

Posts