Hi there,
I am trying to build a page that has a lot of functionality on it: search box, filters, pagination, etc. A couple mockups of the design are attached. My questions are many and varied, some general and some specific.
I am aware that Toolset can do all of this, but I'm unclear about how to make it happen, and especially how to combine multiple functions (for example, searching by keyword and filtering those results).
I'm also unclear how to achieve the layout I want. For example, I know I can include filters, but by default they appear above the content, and I would like mine to appear to the left of the content. Also, can I separate searching and filtering, or have two "filters" for the same view on the same page, to match my layout?
Pagination is easy to add, but the pagination information I want to display doesn't seem to be available out of the box. For example, in the mockup you'll see a hypothetical page would display "1–6 of 223." Is this possible in Toolset? Or do I need to build a custom shortcode?
Saul
Hello Saul and thank you for contacting the Toolset support.
I'll try to answer each of your questions below:
for example, searching by keyword and filtering those results
Search by keyword is only done on post titles and contents. And you can add filters on taxonomies and custom fields.
You can add search by keywords for custom fields using the "Relevanssi" plugin, but in this case, the whole search is performed by Relevanssi, and that limits Toolset a little, for example, you won't be able to sort by Toolset configuration. Relevanssi takes precedence.
can I separate searching and filtering, or have two "filters" for the same view on the same page, to match my layout?
Yes, you can. Check this example on how to do that with the new Blocks editor https://toolset.com/course-lesson/creating-a-custom-search/#setting-up-the-view-search-and-results-side-by-side
If you are using the legacy editor, you can customize this on the "Output Editor" section. Check this example using the Bootstrap grid system hidden link
For example, in the mockup you'll see a hypothetical page would display "1–6 of 223." Is this possible in Toolset? Or do I need to build a custom shortcode?
Indeed, this is not available by default, you will need to create a custom shortcode, especially, if you want to have, for example, on the second page "7-12 of 223".
Check this example https://toolset.com/forums/topic/filtering-results-does-not-update-the-count-of-results-number/#post-1782557
I hope this answers your request. Let me know if you have any other questions.
Jamal,
Thanks for your response. I've got a couple more questions and comments for you.
+ Thank you for providing information on splitting up searching and filtering. That helped a lot.
+ Thank you for the details around pagination. I used the code in the post to create a custom shortcode.
+ Regarding search, you mentioned the Relevanssi plugin. We're using SearchWP (hidden link). Just to confirm, that will also replace the native Toolset search, correct?
+ In the design (see portion circled in red in the attached PNG), I'm trying to browse the list of custom posts based on a taxonomy term (similar to an archive page for a specific taxonomy term). Do you have any advice about how to accomplish this?
+ Can the search + filter, pagination, and taxonomy term navigation interact with each other to modify the list of custom posts in the main body of the page?
Saul
+ Regarding search, you mentioned the Relevanssi plugin. We're using SearchWP (hidden link). Just to confirm, that will also replace the native Toolset search, correct?
I do not think that Toolset or SearchWP have any integration with each other. Toolset has an integration only with the Relevanssi plugin.
+ In the design (see portion circled in red in the attached PNG), I'm trying to browse the list of custom posts based on a taxonomy term (similar to an archive page for a specific taxonomy term). Do you have any advice about how to accomplish this?
You can create a taxonomy view to get the list of taxonomy terms that you want to display. Each term will have a link to its archive page. Then, you can build a Toolset archive template on that taxonomy, if you want to have the same search/filters for it.
Please note that, currently, taxonomy views can't be built with the block editor. You will have to build it with the legacy editor. You can activate it in Toolset->Settings->General(tab)->Editing experience.
+ Can the search + filter, pagination, and taxonomy term navigation interact with each other to modify the list of custom posts in the main body of the page?
Yes, except for taxonomy archives, where you can't have a filter for the same taxonomy.
And, you won't be able to use the SearchWP plugin for these searches. At least not without custom coding, if possible, and that will need some advanced knowledge of how SearchWP plugin works.
Let me know if you have any questions about this.
Jamal,
Thanks for your response.
+ We've switched our search plugin to Relevanssi. Is there anything special that we need to do to make it replace the native WP search, such as adding custom code? Note: I see there's a webpage devoted to this topic at https://toolset.com/documentation/user-guides/views/searching-texts-custom-fields-views-relevanssi/.
+ We've got the filter working on our page, and it works great. We select some checkboxes and click a Submit button. What we'd like to do is remove the Submit button and when a checkbox is checked, have the page refresh with the filtered results (like the Home Depot website does). I think this can be accomplished via jQuery, but I'm not sure of the specifics. The pseudo-code is something like this:
if a checkbox is checked, submit the filter form
Can you provide any guidance?
Thank you!
Saul
Hello Saul,
There is no need for custom code to integrate Relevanssi. Toolset will take care of that.
Regarding your last question, You can configure the view to reload the page whenever a filter changes.
Depending, on whether you are building your view with the blocks editor, or the legacy editor, you will find this option in the AJAX section. Here too, there will be no need for custom code, especially if you want to use checkboxes. You may need custom code for text inputs, but a simple Enter hit will do the trick. Let me know if that's something you will need.
Jamal,
Thanks for the insight regarding those two items. I've configured the filtering to use AJAX, and it works beautifully.
If you don't mind, I'd like to keep the ticket open, because I'm positive I'll have more questions within the next few hours about some of the other topics in the ticket.
Saul
Jamal,
Per the attached screenshot, I'd like to re-print the active filters above the matching listing of posts ( see "Case Studies" and "2013" in grey). The items also have "X"s to remove / disable them. Is this possible? If so, how?
Saul
Hello Saul, of course, we can keep this ticket open as long as we are handling the same question/request. For support rules, we are able to handle only one issue at a time. This helps us to bring you a better service and also helps other users to find all the information here exposed.
This last feature is not available by default in Toolset. It will require custom code to be implemented. At least the part, where we click on the "X" and it should update the view over AJAX.
We may build the active filters on the server with a combination of views(for taxonomy filters) and simple conditional on URL parameter. Check the wpv-search-term shortcode documentation here https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#vf-214940
But we will still need custom Javascript code to react for clicks on the (x) for each active filter.
We may also build these active filters on the frontend with custom Javascript code, that will search for the active filters and build the needed HTML elements for them.
Please note that custom code is beyond the scope of this forum, and if you are not comfortable with coding, you may need to contact a developer. We publish a list of our partners here https://toolset.com/contractors/
Jamal,
Thanks for your response. I'm a developer and unafraid of reading documentation or writing custom code. I'm just trying to find out what Toolset does out of the box and, for things it doesn't do out of the box, pointers for where I can build those things myself. The reference to wpv-search-term is exactly what I'm looking for.
Now, a new question. I've managed to implement a text search field and filter with a list of checkboxes that updates a list of posts. In the Output Editor, based on a link you shared, I created a two-column layout (see current layout.png). In my layout, I'd like to split up the search field from the filters (see desired layout.png). But it seems to be the case that the search and filters are a single unit in the Output Editor. Can I locate these two elements in different places on my webpage?
Saul
Awesome, Saul, I am glad I could help.
For the last question, I split a new ticket to answer it there and keep it as an example for other users. I'll be posting my reply there.
