Displaying different filter on mobile - Search & Filter Support

Tagged: mobile-friendly

This topic has 4 replies, 2 voices, and was last updated 11 years, 6 months ago by Ross.

Viewing 5 posts – 1 through 5 (of 5 total)

Anonymous
(Private) March 19, 2015 at 6:56 pm #13728

This is not a problem with S&F Pro, just my own inexperience, but I could use a bit of help.

I have a great filter setup, using checkboxes in 3 sections – looks fabulous on desktop, but on mobile one has to scroll a long way down thru all those checkboxes to get to the results…

I’d like to use a different filter with dropdowns instead for mobile visitors, but I’m not sure how to do that…..

Right now I’m using the shortcode in a sidebar widget to display the filters to the left of the results.

I think I should probably have to add something to my functions.php file to use a different filter shortcode if the site visitor is on a mobile device, then call my function in the widget instead (I do have a php widget plugin that lets me use PHP code in a text widget).

SO something like this? (ID 289 is the filter that is the same as the desktop except using drop downs instead of checkboxes, 102 is the desktop-version filter)

function my_filter_switcher() {
if ( wp_is_mobile() ) {

echo ‘[searchandfilter id=”289″ show=”results”]’;

} else {

echo ‘[searchandfilter id=”102″ show=”results”]’;
}
}

Is that the best way to provide a more mobile-friendly filtering experience?

Ross Moderator
(Private) March 19, 2015 at 9:08 pm #13730

Yup this seems like one way to do it.

Alternatively you could use media queries to show/hide the different forms –

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Or you could even use 1 form, and hide some of the fields using CSS

But these changes require that you know a little css first

The above code looks about right although I’ve not tested it.

Thanks

Anonymous
(Private) March 20, 2015 at 12:01 am #13732

Thanks Ross…..I’m pretty good with CSS so I’ll try both tactics and see which one provides better results across various devices…..media queries may be a better way to go given that wp_is_mobile includes tablet devices, and I want to be sure that the experience is best for those folks too.

Anonymous
(Private) March 20, 2015 at 12:11 am #13733

Well the code above DOES work with some modification – I forgot that I need to echo do_shortcode rather than just echoing the shortcode…and I have the ‘show=”results” in there by mistake.

So here is what works really well:
function my_filter_switcher() {
if ( wp_is_mobile() ) {

echo do_shortcode( ‘[searchandfilter id=”289″]’ );

} else {

echo do_shortcode( ‘[searchandfilter id=”102″]’ );
}
}

BUT I am still going to play around with CSS because I would definitely like it to play nicer on the iPad or other tablets…..

🙂

Ross Moderator
(Private) March 20, 2015 at 12:12 pm #13741

Thanks for the update sounds good! 😀
Author

Posts

Viewing 5 posts – 1 through 5 (of 5 total)