Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #290904

    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.

    #291749

    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

    #291872

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

    ~Jenn

    #292555

    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

    #292590

    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

    #293836

    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

    #293935

    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.

    #294490

    Hey!

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

    Regards,
    Yigit

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