Mobile usability of vert_slider

  • Posts: 98
  • Thank you received: 7
  • Hikashop Business
5 years 1 month ago #303619

-- url of the page with the problem -- : www.2-rad-schwede.de
-- HikaShop version -- : 4.0.2 business
-- Joomla version -- : 3.9.2
-- PHP version -- : 7.0.16
-- Browser(s) name and version -- : mozilla latest version

Hi

we have on the start some selected products showing with the layout mode Vert_Slider.

It's a great to use and works perfectly on the desktop. On the IPhone it's impossible to slide up - so no chance to to see the product details and the price.

Is there a better solution ?

Thanks and best regards
Markus

Please Log in or Create an account to join the conversation.

  • Posts: 81378
  • Thank you received: 13037
  • MODERATOR
5 years 1 month ago #303645

Hi,

Well, besides not using the that effect, I don't see.
Safari on iphone doesn't support onmouveover events which are precisely the events used for that slide on hover effect.
www.evotech.net/blog/2007/07/web-development-for-the-iphone/

Please Log in or Create an account to join the conversation.

  • Posts: 98
  • Thank you received: 7
  • Hikashop Business
5 years 1 month ago #303911

Hi Nicolas,

thanks but not very helpful in 2019 where a >50% of the traffic is mobile.

Is there no chance to enhance the existing functionality in a way like you implemented it within your documentation. That the first click opens the detail slider and then the next click will open the product?

would be extremly helpful

thanks and best regards
Markus

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 81378
  • Thank you received: 13037
  • MODERATOR
5 years 1 month ago #303927

Hi,

50% might be mobile, but note that it works just fine on Android, and it works fine on Apple if you use Chrome, Firefox, etc. It only doesn't work on Apple with Safari because that browser doesn't support the onmouseover trigger properly like everyone else does.
So I guess that only a few percent of your customers would be affected.
Now I would be happy to do something for Safari, but I couldn't find an easy solution. I guess we could implement an onclick on the area, but if we do that, it means that the buttons inside the area that appear when you hover on it won't be clickable anymore. So if you have an add to cart button which appears when you hover on the area (like it's often the case), the button wouldn't work and it would instead redirect on the product page for all the browsers, even on PCs.
So doing the same thing that we do on our documentation is not really a solution in that case. The remedy would actually be worst than doing nothing.

I've looked a bit deeper into it and I think I migth have a solution.
Edit the file listing_slider_vertical via the menu Display>Views and change the code:

<?php
}
?>
at the end to:
<?php
	hikashop_loadJslib('jquery');
?>
<script>
window.hikashop.ready(function(){
	hkjQuery('#<?php echo $mainDivName; ?> .hikashop_vertical_slider_subdiv').on('touchstart', function () {
        hkjQuery(this).trigger('hover');
    }).on('touchend', function () {
        hkjQuery(this).trigger('hover');
    });
});
</script>
<?php
}

?>
That should normally allow the slider code to trigger with touch events allowing even the effects to work on Safari mobile.
Please test that on your website and let us know how it goes so that we can add that to the next release if it works fine.

The following user(s) said Thank You: Markus Schnier

Please Log in or Create an account to join the conversation.

  • Posts: 98
  • Thank you received: 7
  • Hikashop Business
5 years 22 hours ago #305233

Hi Niclas,

thanks again for the great support and sorry for the late response.

but it works now GREAT on safari (tested on iphones and ipads).

for sure is still tricky that the selected page is not directly loaded but it's much much better then before. Definitly worth to add to the next release.

thanks and best regards
Markus

The following user(s) said Thank You: nicolas

Please Log in or Create an account to join the conversation.

Time to create page: 0.066 seconds
Powered by Kunena Forum