Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 14, 2014 at 9:45 am #290904
    monkey_girl

    Hey guys,

    I saw that you updated the woocommerce shop filters for mobile (“sort by default, price, etc.” and “display # of products per page”). Thanks for working on it. However, while the filters are now selectable and can be expanded, they do not remain expanded long enough to be able to click on any of the selections. It’s happening on your demo site here, too:

    http://kriesi.at/themedemo/?theme=enfold (default shop tab)

    Any suggestions for a quick fix would be much appreciated.

    July 15, 2014 at 6:30 pm #291749
    Dude

    Hey monkey_girl!

    Please try if this css code fixes the issue on iphones/ipads:

    
div .product-sorting ul{
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}

    Regards,
    Peter

    July 15, 2014 at 11:37 pm #291872
    monkey_girl

    I’m afraid that didn’t work. How about a JS solution?

    ~Jenn

    July 17, 2014 at 4:45 pm #292555
    Dude

    Hi!

    I’ll mark this one for Kriesi and Josue – afaik both can test the dropdown fields with a Mac and can check if a js script solves the issue.

    Regards,
    Peter

    July 17, 2014 at 5:59 pm #292590
    monkey_girl

    Thanks. Just a reminder… It’s not a problem on Mac desktops. If you can, try a live device test on a current iphone/ipad. I believe it’s a touchscreen problem.

    ~Jenn

    July 21, 2014 at 1:44 pm #293836
    Yigit

    Hey Jenn!

    Please try adding following code to Functions.php file in Appearance > Editor

    function add_custom_dropdown(){
?>
<script>
jQuery(window).load(function(){
  if (jQuery(window).width() <= 990){	
	   jQuery(".sort-param-count").click(function() {
            jQuery(".sort-param-count ul").toggle();
});
	   jQuery(".sort-param-order").click(function() {
            jQuery(".sort-param-order ul").toggle();
});
  }
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_dropdown');

    Cheers!
    Yigit

    July 21, 2014 at 5:53 pm #293935
    monkey_girl

    Well… yes and no. That holds the menu open on iPhone (and created some unexpected behavior on iPad).

    So, on iPhone:
    After adding that code, now when clicking on one of the select options (like “Price”), the object behind the menu actually gets clicked. I thought maybe it might be a z-index problem, but then why can I see the select menu on top of the content? Haven’t tested on android/windows phones. If we get it working on iPhone, I’ll test on other mobiles.

    On iPad:
    After adding the code, the menu has to be tapped twice or more to stay open. Behavior was working better before adding the new code to functions.php, so I’m assuming that must’ve been fixed in the most recent update. Would rather not have this behavior on iPad, so I’m inclined to say that code won’t work for my purposes, unless it can be used to target device widths below (max-width:480px).

    Looks like the problem is now localized to iPhone. I’ve tested using the Enfold theme as well as my child theme. I’m on an iPhone 5S with the latest iOS.

    Since this is now holding up our site release, I’ll hide the menu on smaller devices using a media query in the CSS. But please do keep trying for a solution. This is an essential piece of the architecture, especially for mobile shops.

    Thanks for working on it.

    July 22, 2014 at 5:48 pm #294490
    Yigit

    Hey!

    I asked @josue to look into it. Let us wait to hear from him

    Regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.