[Resolved] Displaying search results in tab view

[Author]

Posts

[catrionaD]

I am trying to:

Create a search and results page.
Visitors should be able to conduct a text search e.g. "diabetes" or to browse by category area e.g. "health and care".
Results should be displayed within the "National services" tab.
Visitors should be able to filter through results using various criteria, with the results updating dynamically.

Link to a page where the issue can be seen:
hidden link

My queries relate to:

1. Shortcode for displaying search results within "National services" tab.
I thought the correct shortcode was [wpv-post-body view_template="template-for-national-listings"] or
[wpv-view name="template-for-national-listings"] but neither works. Can you please advise?

2. Display search template only.
I was able to display the search template only for the text search.
However, I don't know how to do this for the category drop down. Can you please advise?

3. Filter display
I would like to set up a number of filters. The majority of these filters are set up as taxonomies for the "National listings" post type. Do you have guidance I can follow for setting these up, and changing display whether viewed on desktop (visible) or tablet/mobile (pop-up)?

4. Categories and Subcategories
I would also like to include Categories and Subcategories as filters. For example, if a user selects "Health and care" then the subcategories shown will be "Addiction, Arthritis, Asthma" etc
I have followed this guidance so far but not sure I have set it up correctly/need guidance - https://toolset.com/forums/topic/built-a-custom-search-with-filters/
>
I have set up three custom post types: National listings, Categories, Sub-categories.
>
I have set up taxonomy "sub-category" for National listings.
>
I have set up one Post relationship so far:
(1) Many-to-many between "Categories" and "Sub-categories" as some subcategories may fall under multiple categories. For example, the sub-category "worker rights" falls under the two categories "Work and study" and "Your rights"
(2) One-to-many between "Sub-categories" and "National listings" so that each sub-category can be mapped to multiple National listings.
>
Can you please confirm this is set up correctly before I go on to design the front page filters?

5. Filters location
Is it possible to display the filters inside the "National services" tab?
That is, filters to the left side, results to the centre and right.

[catrionaD]

I am using WordPress, Ocean WP and Elementor Pro

[Christian Cox]

Hi, I'm not able to see anything at the link you provided. Could you provide login credentials so I can get a better idea of how things are organized?

1. Shortcode for displaying search results
The correct shortcode format for showing only the results of a View is like this:

[wpv-view name="template-for-national-listings" view_display="layout"]

If you create a blank Content Template ( Classic Editor ) and insert a custom search View, you will have the option to insert just the results. The system will generate this code for you.

2. Display search template only.
If you mean display only the filters instead of the results, the shortcode format is like this:

[wpv-form-view name="template-for-national-listings" target_id="12345"]

Replace 12345 with the numeric ID of a custom Page where the results will be displayed. If I've misunderstood what you're trying to accomplish, let me know.

I would like to set up a number of filters. The majority of these filters are set up as taxonomies for the "National listings" post type. Do you have guidance I can follow for setting these up
Sure, we have documentation on setting up custom search filters. The general idea is you place your cursor in the Search and Pagination editor of a View editor screen, then click "New Filter" and the system will guide you to select the type of filter you want. If you cannot see the Search and Pagination editor panel, scroll to the top right of the View editor screen and click "Screen Options". You can enable the panel here.
https://toolset.com/documentation/user-guides/front-page-filters/

...and changing display whether viewed on desktop (visible) or tablet/mobile (pop-up)?
There's nothing automatic that will modify the layout / design based on screen size. Toolset offers Bootstrap 3, a library which provides responsive grid design elements. However, implementing this library requires some knowledge of HTML and CSS. Documentation is available here: https://getbootstrap.com/docs/3.3/css/

I have set up three custom post types: National listings, Categories, Sub-categories.
I would also like to include Categories and Subcategories as filters. For example, if a user selects "Health and care" then the subcategories shown will be "Addiction, Arthritis, Asthma
I assume when you talk about Categories and Subcategories, you are always referring to these custom post types. It's confusing because WordPress has a built-in taxonomy called "Categories" and hierarchical categories can have subcategories. If possible, I would strongly consider renaming these for clarity, but that's your call.

If you're talking about post relationship filters, you have limited options for front-end filtering. You can have one post relationship filter of any kind, OR you can have chained one-to-many hierarchical relationship filters. So you could have a grandparent > parent > child filter setup with 3 filters, or you could have any other single filter. However, it is not currently possible to implement multiple post relationship filters other than the chained hierarchical filter I just explained.

5. Filters location Is it possible to display the filters inside the "National services" tab?
I can't see what you mean exactly. When you mention the National Services tab - are you talking about a main navigation element, or tabs in a single page that you can use to show and hide different content? I think login information will help me.

[Christian Cox]

4. Categories and subcategories - What is the best way to add Support categories and Support subcategories as filters?
Use the "Screen Options" tab at the top of the screen to activate the Query Filter panel. This will show you the filters applied to the search results, which combine with the filter controls in the Search and Pagination panel to control the results. Remember, you can only have one relationship filter, or a series of chained, one-to-many relationship filters. However, the relationship you have established between Support Categories and Support Subcategories is not one-to-many. It is many-to-many, and so it will not work in a chained relationship filter. In other words, there is no way to filter National Listings by Support Categories in your current setup. Only if you used a one-to-many relationship between Support Categories and Support Subcategories would it be possible.

5. Filters/tab location - If I search "diabetes" no results are returned (compare to existing search via homescreen which is working).
Have you rebuilt the Relevanssi index recently? Also the homepage search bar searches "Listings" posts, not "National Listings" posts, so the results won't necessarily be identical in both places.

In any case, will I be able to filter the returned results, i.e. after the text search, filters can be applied.
I honestly don't know how well this will work because it's not recommended to use two separate sets of filters like this to control the same View's results. Give it a shot, but keep a close eye on how the filters and search box interact. I wouldn't try to use AJAX updates here.

How can I set it so that "verified" search results are shown first, followed by "unverified" in a random order?
Views can help you sort by a primary sort and a secondary sort. So you could sort first by Verified / Unverified as primary sort, then apply random order whenever two posts share the same verified or unverified status. But complex combinations of those criteria is not so simple. For example, you would have to use custom code to apply a random order to the unverified results, but an alphabetic order to the verified results. We offer several filters you can use to manipulate queries and result sets:
https://toolset.com/documentation/programmer-reference/views-filters/

[catrionaD]

4. Categories and subcategories -
I've now set up a One to Many relationship between the post type Support categories and the post type Support sub-categories.
There is also the existing One to Many relationship between the post type Support sub-category and National listings.
Within Field Group for National listings, I have included a taxonomy called "sub-category".
I think I need a way to connect the "sub-category" content to the "Support sub-category", is this right?
And I'm not sure which filter selection to apply.
I would like this set up so that there is a drop down for Support Category,
And a second drop-down for Support Sub-category which updates selection based on Support Category selected?
Can you please advise?

5. I've rebuilt the index for National listings with Relevanssi.
(I hadn't used Relevanssi for "Listings" - the live search which is working).
The search at /national-services still doesn't appear to be working.
For example, a text search of "diabetes" returns no results.
(ignore the CSS for the search box I can fix this later)
Can you please advise?

"it's not recommended to use two separate sets of filters like this to control the same View's results"
I've now merged into one, thanks.

Thanks for the verified/unverified ordering guidance. I'll give it a go once the search is working 🙂

[Christian Cox]

I think I need a way to connect the "sub-category" content to the "Support sub-category", is this right?
You lost me, I'm not sure why there is a taxonomy "sub-category" in this case. For the purpose of the one-to-many chained relationship filter, the sub-category taxonomy is irrelevant.

It looks like you have combined your filter controls into one View: hidden link
However, it looks like the Query Filter section isn't up-to-date. It only has a text search filter, but there are other taxonomy filter controls in the Search and Pagination editor. So I would edit the Search and Paginaton editor code to remove the existing taxonomy filters, since they are not connected to any Query Filters. See the highlighted section of the screenshot - delete all highlighted code. It's best to recreate these filter controls now using the "New Filter" button so they are automatically synced with the Query Filters.

Next, add a New Filter and choose Post Relationship. You will have the opportunity to select one one-to-many relationship, then add another ancestor to choose the next one-to-many relationship. The system will create the correct shortcodes and the corresponding Query Filter.

The search at /national-services still doesn't appear to be working.
Check now please. I edited the View's Loop and replaced the content inside the loop with a fresh template. You can see I have added the Post Link for now. If you'd like to update the design, you can edit this template or use the Loop Wizard to create your own template.

[catrionaD]

Ok, almost there!

I followed your instructions. Now if I text search "diabetes" I see related national listings.

However, the Support Categories drop-down is null. And therefore I am also unable to select a Support Sub-category.

Also I am unable to filter results by Costs, Support types or Provider types.

Can you please advise? Thanks Christian

[Christian Cox]

However, the Support Categories drop-down is null. And therefore I am also unable to select a Support Sub-category.
I just checked these four National Listings posts, but they are not connected to any Support Sub-Category post:
https://mypickle.org/wp-admin/post.php?post=12542&action=edit
https://mypickle.org/wp-admin/post.php?post=12541&action=edit
https://mypickle.org/wp-admin/post.php?post=12540&action=edit
https://mypickle.org/wp-admin/post.php?post=12539&action=edit

Your View has the option "Show only available options for each input" selected, so this may be the expected behavior if you haven't linked up the posts yet in their respective post relationships. Can you show me any posts that are already connected via the chained one-to-many post relationships?

Also I am unable to filter results by Costs, Support types or Provider types.
This may also have to do with the "Show only available options for each input" option, so let's get the relationship filter working before we tackle this.

[catrionaD]

Hi Christian,

The National listings are now connected to Support Sub-categories.

However, these errors are displaying where the filters should be:

"Support Categories The ancestors argument does not end with a valid post that is related for the returned post types on this View.
Support Sub-categories The ancestors argument does not end with a valid post that is related for the returned post types on this View. "

Can you please advise? Thanks

[Christian Cox]

I don't know what's going on now, National Listing posts no longer exist and the View is configured to display that missing post type, so it's not working correctly. Can you give me an update of what has changed in your site's custom post type structure?

[catrionaD]

Thanks Christian,

I deleted all National listings content because the relationship wasn't set up correctly.
I had since (re)uploaded the content with relationships working.

For some reason the archive and view was also deleted. I have just recreated these.
On Relevanssi I have Saved the options and built the index again.

The search, filters and ordering are now working.

However I'm keen to separate the search box (with filter and reset buttons) and filters.
This is because on mobile I would like the search box to appear across the screen, and the filters to pop-up when selected.
What is the best way to do this? Or how do others achieve a similar effect?

Also, including the Toolset element has knocked the formatting of other elements of the page e.g. where it says "Anyone can add a listing or story", footer etc.
Is there any way around this?

Thanks!

[Christian Cox]

The search, filters and ordering are now working.
Okay that's great news. Sometimes starting from scratch is easiest if you've got something that's not working like you would expect.

However I'm keen to separate the search box (with filter and reset buttons) and filters.
This is because on mobile I would like the search box to appear across the screen, and the filters to pop-up when selected.
Not sure I understand what you mean by filters that pop-up when selected. Can you show me an example of this on another site, or describe in more detail? On mobile, it seems that the search box does span the width of the page so it seems like you've got that figured out.

Also, including the Toolset element has knocked the formatting of other elements of the page e.g. where it says "Anyone can add a listing or story", footer etc.
It's kind of hard for me to say without knowing what it looked like before. I checked the "Anyone can add a listing..." text and it seems like some CSS applied in the National Services Template content template has modified the style of this text. I'm attaching the screenshot here. If you need more specific information about style overrides, let's start a new ticket. I'd like to keep this this focused on getting the search filters and results functioning correctly.

[catrionaD]

Sure, I'll open another ticket regarding the formatting.

For search box and filters, Amazon is a good example.
On mobile there is a search box spanning the width.
When results are returned, users click "Filter" to see available options to filter through results.
Otherwise, the filter options are not visible on the screen.

[Christian Cox]

Okay I see, the filters should be hidden on mobile until someone clicks a link or button to display them. The Bootstrap library provides some responsive features that could be helpful here, but there's nothing predefined in Views that will produce this type of responsive filter display automatically. There is a "collapse" feature in Bootstrap that can be used to hide a section of content, and BS also offers ways to toggle that section on or off by clicking a button. I did a quick search online for "Bootstrap 3 collapse on mobile" that led to a couple of examples showing how this could be set up:
https://codepen.io/glebkema/pen/xryaKK
https://stackoverflow.com/questions/28086811/collapse-div-only-on-mobile-view-bootstrap-3
Basically in the Search and Pagination editor panel, you would wrap your filter controls in a container element with responsive CSS classes applied. Then you would show a button or link on mobile resolutions, and when the User clicks that link the filters will toggle on or off.

[catrionaD]

My issue is resolved now. Thank you!