[Resolved] Separate search filter and result only for mobile view

[Author]

Posts

[cynthiaH]

Tell us what you are trying to do?
I have a webpage built with Toolset that contains a search filter, a search result list view and a map with search result shown on it. It works fine with a desktop browser. (See screenshot)
But it's too much information on a mobile phone. So I want to split them in the following way: One page only shows search filter, and another page shows the result.
Now I have two main problems:
1.I cannot seem to make the search result shown on a new page
2.Even if I can, I'm not sure how to make it show on a new page only for mobile phone, and still show on the same page on desktop.

Is there any documentation that you are following?
I'm trying to follow this link:https://toolset.com/course-lesson/displaying-search-results-on-a-different-page/
but in my view setting I don't see the "Only the search form" button. (see screenshots)
Also I'm not sure how to make this work for mobile view only.

Is there a similar example that we can see?
Yes, if you go to hidden link on your mobile phone, and click "Search", that's what I wanted to achieve: You put search criteria in one page, see the result in another. Also the result page have a "map view" toggle (Although I'm willing to remove the map view if it makes things too complex)

[Nigel]

Hi there

Before digging in to why you are having problems splitting the search form and search results onto separate pages, I suspect it may not be the solution you are looking for.

On the results page the search form is also displayed (so that users can update their search filters etc. without having to return to the original page).

So if your problem is how cluttered the results page appears, that won't solve it.

You could try using conditional blocks in your View to limit what is shown on mobile screens, where your condition checks whether the core WP function wp_is_mobile() returns true or false.

It's not perfect, but should help, and you can try testing on different devices to see if it gives you the results you want.

See https://developer.wordpress.org/reference/functions/wp_is_mobile/.

To use it in a conditional block you need to go to Toolset > Settings > Front-end content and register the wp_is_mobile function so that it is available in conditions.

Where functions return true or false, use 1 or 0 to compare against.

See https://toolset.com/course-lesson/using-toolset-conditional-block/

[cynthiaH]

Hi, no I think separating page is still the solution I'm looking for here.
Because if I can successfully make my search result shown in another page, even if a search filter will show again on the result page, I can easily hide it for the mobile view. (See the screenshot).
So I think my original questions are still valid:
1. Why I don't have the "Only the search form" button in my setting.
2. How do I make an entire page only appear in mobile view (So the "result only view" page is only available for mobile user)
If the second question is out of your scope, please feel free to ignore it. I can do some research from my end as well.
The first one is the most important one at hand.
And thank you for the "conditional block" training link. I don't think it can solve my current problem but it does give me some idea for other things.
Thanks!

[Nigel]

Regarding 1, when you add a View block to the page where you want to only show the search form and choose your existing View, did you choose either of the options for whether to edit the existing View or edit a copy?

You actually need to ignore those in this case and choose neither, just update the settings in the sidebar for which part of the View to display.

Might that be the problem? (You may want to delete the View block from the page and start again.)

I'm not sure I follow what you want, regarding 2.

You are going to have a search page, which displays only the search form, which redirects to a results page (displaying both the search form and results) when a search is submitted. You will hide the search form on that results page on mobile devices.

"How do I make an entire page only appear in mobile view?"

So, only visitors on mobile should see that results page? But what should other visitors see? Because they are going to arrive at that page when they submit a search on the separate search form page.

[Waqar]

{ticket status updated}

[cynthiaH]

Hello, what I originally thought was: If the user is using a desktop, then they can see the search filter, search result and search map on the same page, because the screen is big enough. If the user is on mobile, then they only see the search filter on screen, and then jump to a new page to see the result .
Does it make sense? But given the information you just provided, I think maybe it's too hard to do, maybe I need to compromise a bit: On both desktop and mobile, user have to jump to a new page to see search result. But, if they are on mobile then the result page will not show search filter again. I guess that would be doable. I will try it later this week

[Waqar]

Thanks for the update and please take your time.

Let us know if you have any follow-up questions and for a new question or concern, you're welcome to start a new ticket.