SDK/Theme Update: Collapsible Filters

[Liz_Frailey]

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:

1. Run Tools > Jambo Commands > Add Page
2. Name it anything (e.g., “locations2”)
3. Add the verticalKey
4. Copy over any customizations or config objects from your existing page files (e.g., your verticalsToConfig object, any other componentSettings you’ve modified)
5. Recommended: Make sure your Facet behavior has Facets.expand set to “false” instead of “true”
6. Recommended: Make sure your Facet behavior has Facets.searchOnChange set to “true”
7. Delete the original json/html.hbs files for that vertical
8. Use live preview to QA your work
9. Rename the json/html.hbs files to the original vertical name
10. Commit your changes

To copy-paste the data:

1. 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

2. Navigate to the default html.hbs template file in the Theme (see screenshot above)

3. Copy the default file and replace your existing pageName.html.hbs file completely

4. 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

5. Navigate to your config.json file for this vertical

6. Update the VerticalResults configuration in componentSettings.

   • Remove the AppliedFilters object
   • Add “hideResultsHeader”: true

   "VerticalResults": {
     "noResults": {
        "displayAllResults": true
      },
     "hideResultsHeader": true
   //optionally any additional config that’s not the AppliedFilters object
   }
   

7. Add the AppliedFilters and FilterLink configuration to componentSettings.

   "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
   },
   

8. Recommended: Switch your Facet behavior so that Facets.expand is set to “false” instead of “true”

9. Recommended: Make sure your Facet behavior has Facets.searchOnChange set to “true”

10. Use live preview to QA your work

11. 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!

[jyorke]

Hi Liz! I really love this update - but my client is planning to use Answers as their locator, and as such they want the filters to be visible immediately to the user (not behind a button). If we are on the latest version of the theme, is there any way to go back to the old version of the facet filters?

I tried commenting out all the “collapsible-filters” partials, but then I can’t get my facets to show. Am I doing something wrong?

[roser]

Hi Jessie,

Yes there is! In addition to commenting in the partials for the filters, you should do the following:

1. On line 39 of the html.hbs file, <div class="Answers-filtersWrapper js-answersFiltersWrapper CollapsibleFilters-inactive">, remove the CollapsibleFilters-inactive class. (So it will just be <div class="Answers-filtersWrapper js-answersFiltersWrapper">)

2. As you said, don’t comment in any of the collapsible-filters partials.
   This includes the script partial at the top, {{> templates/vertical-map/collapsible-filters/page-setup }}, and the markup in the body, {{> templates/vertical-map/collapsible-filters/markup/filterlink }} and {{> templates/vertical-map/collapsible-filters/markup/viewresultsbutton }}.

Beyond that, you may need to add some margin/padding to keep the filters near the top. If you have a lot of options, we’d recommend collapsing them so that the results aren’t pushed too far down the page.

Let us know if this works for you!

Thanks,
Rose

[Carolyn_Gorick]

Hello! Are we able to use collapsible filters on other verticals on desktop besides the map layout?
Thank you!

[Kristy_Huang]

Hey Carolyn,

Collapsible filters are included on all page templates, not just map templates. This screenshot shows the vertical-standard layout with one of the lines you’ll have to comment in for collapsible filters.

If you’re not seeing this in your existing verticals, be sure you’re on Theme 1.14 or above, and then follow the steps above to either create the vertical or copy/paste the template over.