I’m currently developing a website and have been utilizing the Finsweet filtering system, which has proven very beneficial. However, I’m encountering an issue. It’s a real estate website with a “Properties” page. I’ve implemented filters for users to refine their search, but I’d like them to select filters on the home page, submit, and then be directed to the Properties page with the chosen filters already applied and displaying results. Currently, the filters aren’t functioning on the home page, possibly due to the absence of CMS items, which shouldn’t matter. Essentially, I want users to filter, submit, and see results on the Properties page.
FS Filter has a configuration option that stores the filter settings on the URL, e.g. ?name=bob&color=red,green etc.
This lets you setup a filter page so that you can navigate to it with the filter options pre-set and auto-applied.
In your case, this could work well, the simplest approach I can think of is-
Build out your filter completely on your filter page
Enable the querystring feature
Make it auto-filter, no submit button required
Turn the filter form ( only the filter form ) into a component
Add it to the homepage
Add a collection list, with the necessary FS filter attributes, but no need for FS Load, and you can limit it to 1 item and hide it. You’re not actually wanting to see any results here, just for the filter to function, and for the querystring to update.
On the homepage, add a button, something like “See Property Listings”
Then, you need a small piece of javascript which will trigger off of a click on that button, Take the current querystring, form your target page path + filter querystring, and then navigate to it.
That will get you what you’ve described, and if you make this self-contained as a component ( with the JS in an embed ), then you can put it on every page of your site easily.
Just to add, I’d probably go a bit further than this. Filters are a pain without feedback, so I typically build them to show the # of matches. Even with your list hidden, you can build it out properly, i.e. FS load and a full set of hidden results, just so that you have the correct count to display. This make it easier for the user to refine their filter before clicking “View”, and they can be confident they’ll see results.
Hello, I appreciate your prompt reply. I’ve been attempting to implement this task. However, I encountered a problem. To incorporate the collection on this page, I tried to copy it from the “properties” page and then paste it on the home page. Unfortunately, I’m unable to proceed due to a limitation stating, “you cannot have more than 1 nested collection list on a single page.” I think this restriction arises because I already have a similar collection for the “Featured” section. Considering this, I believe employing custom code might offer a more direct solution. I’ve noticed that on the Finsweet website, they often address such challenges by providing custom code solutions.
Remember that on the homepage you aren’t actually showing results, so the only part of the collection list you need is just enough to make FS filter work. You don’t need nested collection lists here, all of that’s hidden anyway.
As long as FS filter works and updates the URL querystring properly, you’ve got what you need for a basic implementation.
Okay. Instead of copy pasting the collection, I have added it completely as a new collection along with all the necessary FS filter attributes to the collection. And now, the filters are actually working. I just need help in 2 places:
How do i add the QueryString?
Can you kindly help with the small piece of javascript which will trigger off of a click on that button, Take the current querystring, form my target page path + filter querystring, and then navigate to it.