Shop Slider Un-Usable on Mobile

ahalliday · September 2014

The Shop Slider is great, it shows off the products nicely and is responsive.

HOWEVER there is a serious problem. On touch enabled devices, the tap event does not open any of the links within the carousel.

THIS HAPPENS EVEN IN YOUR LIVE SHOP THEME PREVIEW. So no need for me to send you a link to see the problem in action.

Click works file on desktop, and resizing the browser window to mobile dimensions there is no change. But access the page on a touch screen device, and none of the links open when tapped. The overlay element with link icon will show and hide, but the link will not open. The user can long-tap to open a context menu and open the link in a new window, but this is not acceptable.

Any chance of a quickfix to this before a new release of the theme is put together? I see there is a touch event that handles the toggle:
ontouchstart="this.classList.toggle('hover');"

Is there any way to hijack this event to trigger a click on the link within this div? I tried ontouchstart="this.find(\'a\').click();" and ontouchstart="this.find(\'a\').trigger(\'click\');" but this doesn't work.

ahalliday · September 2014

Solved!

Made the following changes in theme-shortcodes.php

Removed the code to add the 'mask' (<div class="mask"></div>)
Removed the code to add the slide-up icons (<div class="image_links"> etc </div>)
Removed the ontouchstart listener on div.image_frame
Changed the code for each <a> element in the product details to add a touch listener to trigger a click:
$output .= '<a href="'. get_the_permalink() .'" ontouchstart="this.click();">';

This is a simple work-around hacked together by a n00b. I'm sure your boffins can put something more solid in place.

Albert · September 2014

Thanks for explanation but we do not recommend to modify theme files because after theme update everything will be overwritten. But we really appreciate what you described above!

ahalliday · September 2014

I absolutely agree with you about not modifying theme files, but in this case it's necessary to get the slider working on Mobile in the short term.

Do you intend to solve and fix this issue in a future release?

Albert · September 2014

We understand you and this will be fixed with next version.

BTW On ipads or other devices than iphone everything works fine. Only on iphone it does not work because of hover action on click and all hover actions on iphones must be removed. We`ll do it with next update.

Thanks for understanding!

ahalliday · September 2014

Just FYI seen this on iPhone and also Android mobile handsets.

Look forward to the update, and thanks for being proactive.

Is it possible I could get the list of affected files when this particular issue is fixed in the next release? Since I've already modified the core for a couple of other tweaks, I need to be careful about regression issues when I update.

Albert · September 2014

List of modified files we always leave on http://themeforest.net/item/betheme-responsive-multipurpose-wordpress-theme/7758048 in "Updates & Changelog" section but we always recommend to update all files because sometimes we can miss files that were also updated. Since we got such many files and long lists of updates it is very hard to control all updated files. And also this is the main reason why we do not recommend to modify theme files.

Thanks for understanding!

Shop Slider Un-Usable on Mobile

Comments

This website uses cookies