Mobile usability with Storefront
-
Hi,
I’m trying the search out on a client’s development site which uses the Woocommerce Storefront theme.
All seems to work fine. Happy with the response time, especially considering there are over 150,000 products.
Only thing that’s stopping adding this to the live site is on mobile:
Storefront drops the top search box to the bottom of the screen (you click on the magnifying glass) but the Advanced Woo Search results go off the bottom of the screen.
Try a search for: Danfoss
You can only see part of the results. It’s difficult to scroll down and you can’t get to the bottom of the list.
Would maybe prefer to see the search results go above the search box or the screen be allowed to scroll somehow.
Is this a possibility?
Cheers,
Andy
The page I need help with: [log in to see the link]
-
Hi,
Please tell me what plugin version number you are currently using?
This issue seems to be solved in the latest plugin releases.Regards
Hi Mihail,
Thanks for the response.
Version 2.09
No updates pending on the site.
Cheers,
Andy
Looks like I managed to solve this issue.
I will add all necessary changes to the next plugin release.Regards
Hey I am facing the same issue. Noone is able to see the product because the fixed button opens down and out of the screen…i have version 2.09 too and it is showing as latest version. Is there any update on this thread which I cannot see…please share here too…it can really help.
In the post I see just above:
ILLID (@mihail-barinov)
8 hours, 10 minutes ago
Looks like I managed to solve this issue.
I will add all necessary changes to the next plugin release.Regards
Which is great news.
👍👍-
This reply was modified 5 years, 9 months ago by
andyrjames.
Thanks…
Hopefully the next plug-in releases soon…especially since you have 150,000 products 🙂
Thanks @mihail-barinov
Indeed.
More than 300,000 on the client’s live site.
This plugin seems to search much faster than native wordpress and gives the user instant feedback to typing.
Looking forward to the fix.
Cheers Mihail!
Next plugin release is planned on September 7.
If you don’t want to wait till this date you can make some changes in the plugins source code to add integration for Storefront theme.
I can help you with this if you want.Regards
That will be very helpful especially since I will start sharing the website to consumers from 2nd September
Please open advanced-woo-search/assets/js/common.js file, find lines
resultLayout: function () { var $resultsBlock = $( d.resultBlock ); var offset = self.offset(); var bodyOffset = $('body').offset(); var bodyPosition = $('body').css('position'); var bodyHeight = $(document).height(); var resultsHeight = $resultsBlock.height(); if ( offset && bodyOffset ) { var width = self.outerWidth(); var top = 0; var left = 0; if ( bodyPosition === 'relative' || bodyPosition === 'absolute' || bodyPosition === 'fixed' ) { top = offset.top + $(self).innerHeight() - bodyOffset.top; left = offset.left - bodyOffset.left; } else { top = offset.top + $(self).innerHeight(); left = offset.left; } if ( bodyHeight - offset.top < 500 ) { resultsHeight = methods.getResultsBlockHeight(); if ( ( bodyHeight - offset.top < resultsHeight ) && ( offset.top >= resultsHeight ) ) { top = top - resultsHeight - $(self).innerHeight(); } } $resultsBlock.css({ width : width, top : top, left: left }); } },and replace with
resultLayout: function () { var $resultsBlock = $( d.resultBlock ); var offset = self.offset(); var bodyOffset = $('body').offset(); var bodyPosition = $('body').css('position'); var bodyHeight = $(document).height(); var resultsHeight = $resultsBlock.height(); if ( offset && bodyOffset ) { var styles = { width: self.outerWidth(), top : 0, left: 0 }; if ( bodyPosition === 'relative' || bodyPosition === 'absolute' || bodyPosition === 'fixed' ) { styles.top = offset.top + $(self).innerHeight() - bodyOffset.top; styles.left = offset.left - bodyOffset.left; } else { styles.top = offset.top + $(self).innerHeight(); styles.left = offset.left; } if ( bodyHeight - offset.top < 500 ) { resultsHeight = methods.getResultsBlockHeight(); if ( ( bodyHeight - offset.top < resultsHeight ) && ( offset.top >= resultsHeight ) ) { styles.top = styles.top - resultsHeight - $(self).innerHeight(); } } // @since 2.10 styles = AwsHooks.apply_filters( 'aws_results_layout', styles, { resultsBlock: $resultsBlock, form: self } ); $resultsBlock.css( styles ); } },Also please use following code snippet
add_action( 'wp_footer', 'storefront_footer_action' ); function storefront_footer_action() { ?> <script> window.addEventListener('load', function() { function aws_results_layout( styles, options ) { if ( typeof jQuery !== 'undefined' ) { var $storefrontHandheld = options.form.closest('.storefront-handheld-footer-bar'); if ( $storefrontHandheld.length ) { if ( ! $storefrontHandheld.find('.aws-search-result').length ) { $storefrontHandheld.append( options.resultsBlock ); } styles.top = 'auto'; styles.bottom = 130; } } return styles; } if ( typeof AwsHooks === 'object' && typeof AwsHooks.add_filter === 'function' ) { AwsHooks.add_filter( 'aws_results_layout', aws_results_layout ); } }, false); </script> <style> .storefront-handheld-footer-bar .aws-search-result ul li { float: none !important; display: block !important; text-align: left !important; } .storefront-handheld-footer-bar .aws-search-result ul li a { text-indent: 0 !important; text-decoration: none; } </style> <?php }You need to add it somewhere outside the plugins folder. For example, inside functions.php file of your theme or use some plugin for adding code snippets.
Hi Mihail
Much better!
If you go to the test site in the first post using a mobile and search for: oventrop
You get a single (correct) result.
Search for: grundfos
The top 3 results are off the top of the screen when the mobile keyboard is visible with no way to scroll to them.
Backing out of the mobile keyboard displays the list correctly allowing full scroll.
Cheers!
Andy
Hm, did you change your theme. Now I can’t find search form fixed to the bottom on mobile devices.
No change of theme and no updates to Storefront recently.
I can still see it on mobile.
Tap the magnify glass centre bottom and up slides the quick search box.
Type in: fujitsu and your results appear.
Works on my android phone and narrowing the screen on Chrome or Firefox.
Cheers,
Andy
Thanks for sharing it but didnt work with me…
I’ll wait for 7th September
Did you copy the code out of the email notification or the post above?
The code in the email won’t work.
Just a thought.
Cheers,
Andy
-
This reply was modified 5 years, 9 months ago by
The topic ‘Mobile usability with Storefront’ is closed to new replies.