Overview: Collapsible Filters
We’ve added a series of changes to support a new layout called Collapsible Filters. This will make it easier for end users to interact with filters/sorts on the Vertical with Map layout on desktop or on all page layouts on mobile.
Here’s how it works for a user:
To make this possible, we added a few additional components:
- FilterLink (only in the Theme)
- ViewResultsButton (only in the Theme)
- ViewResultsButton (pulled out of VerticalResults in the SDK)
- VerticalResultsCount (pulled out of VerticalResults in the SDK)
You will need to enable these component partials in the pages > html.hbs files whenever you add facets or sorts. Additionally, you’ll want to make sure that you configure these objects in the config > .json file.
Note: When using this layout, we strongly recommend setting searchOnChange: true and in your filters. The layout was designed with this configuration in mind, and presents the ideal UX.
Adding Collapsible Filters to An Experience
Want to add this to your experience? Great, let’s dig into how this would work.
Scenario A: You’re creating a new page and you’re on Theme version 1.14 or higher.
Your default page templates will include all of the needed partials in the pages > html.hbs file and the needed configuration in the config > .json file. It’s just a matter of “commenting-in” the right blocks of code.
In addition to the sort and facet partials, in the pages > html.hbs file, make sure you have the following commented in:
Scripts:
- {{> templates/vertical-map/collapsible-filters/page-setup }}
Markup:
- {{> templates/vertical-map/collapsible-filters/markup/filterlink }}
- {{> templates/vertical-map/collapsible-filters/markup/viewresultsbutton }}
-
- closing
The following should be commented in by default and are necessary as well:
- {{> templates/vertical-map/script/verticalresultscount }}
- {{> templates/vertical-map/script/appliedfilters }}
- {{> templates/vertical-map/markup/verticalresultscount }}
- {{> templates/vertical-map/markup/appliedfilters }}
Below is an example of what the vertical map file looks like:
In the config > .json file, in addition to the componentSettings.facets object (if applicable) you’ll need to comment in:
- componentSettings.FilterLink
The following should be commented in by default and are necessary as well:
- componentSettings.AppliedFilters
- componentSettings.VerticalResults with “hideResultsHeader”: true
Scenario B: You already have a page, but you just upgraded to Theme v1.14 or higher.
Due to the extent of changes that are included, we would recommend either
- Re-creating the vertical page, or
- Copy-pasting from the default page files in the theme (
themes > answers-hitchhiker-theme > templates > vertical-map > page.html.hbs, for example).
To create a new page:
- Run Tools > Jambo Commands > Add Page
- Name it anything (e.g., “locations2”)
- Add the verticalKey
- Copy over any customizations or config objects from your existing page files (e.g., your verticalsToConfig object, any other componentSettings you’ve modified)
- Recommended: Make sure your Facet behavior has Facets.expand set to “false” instead of “true”
- Recommended: Make sure your Facet behavior has Facets.searchOnChange set to “true”
- Delete the original json/html.hbs files for that vertical
- Use live preview to QA your work
- Rename the json/html.hbs files to the original vertical name
- Commit your changes
To copy-paste the data:
-
Recommended: Copy the existing file content for the .json and html.hbs files into a file editor (e.g., VSCode, Word, TextEdit) so you can reference it
-
Navigate to the default html.hbs template file in the Theme (see screenshot above)
-
Copy the default file and replace your existing pageName.html.hbs file completely
-
Comment in / Comment out the appropriate partials based on the original state of the vertical, as well as the new components for collapsible filters specified in Scenario A
-
Navigate to your config.json file for this vertical
-
Update the
VerticalResultsconfiguration incomponentSettings.- Remove the AppliedFilters object
- Add “hideResultsHeader”: true
"VerticalResults": { "noResults": { "displayAllResults": true }, "hideResultsHeader": true //optionally any additional config that’s not the AppliedFilters object } -
Add the
AppliedFiltersandFilterLinkconfiguration tocomponentSettings."AppliedFilters": { "removable": true }, "FilterLink": { "changeFiltersText": "sorts and filters", // Text that displays by default "resetFiltersText": "reset filters", // Text when filters are applied "clearSearchText": "clear search" // Text when there are no results }, -
Recommended: Switch your Facet behavior so that Facets.expand is set to “false” instead of “true”
-
Recommended: Make sure your Facet behavior has Facets.searchOnChange set to “true”
-
Use live preview to QA your work
-
Commit your changes
Scenario C: I don’t want anything to change! I like what I have now!
No problem, you don’t need to do anything then 
Results Spacing Changes
As a part of the collapsible filters update, we also added some extra UX improvements into Theme 1.14. The space between cards and extra padding has been removed.
Before
After
We’re very excited about this frontend update - please leave any comments, feedback or questions in this post!
