Module Assessment | Yext Hitchhikers Platform
Background
Now that you have a working experience, you want to make it better! Having facets or filters available makes the end consumer experience so much easier. You’re going to add facets and filters to the Restaurant and Community Stories verticals.
Remember, facets and filters are only supported in vertical search!
Your Challenge
Navigate to Search > answers > Verticals.
In the Restaurants vertical, add the following fields in Searchable Fields as facets.
- Restaurant Features (
c_restaurantFeatures
) - Restaurant Type (
c_restaurantType
)
- Restaurant Features (
In the Community Stories vertical, add the Theme (
c_theme
) field in Searchable Fields as a facet.Save the configuration. If you get any errors, make sure to check your syntax and look out for extra or missing commas.
Navigate to Pages > Turtlehead Taco Search > Deploys, go to the Code Editor, and click into the master branch. You should expect this to take a couple minutes to load – in the background, it’s starting up a container for your development.
Click “View Live Preview” to open your preview in a new tab.
- Run a search for “restaurants with live music” in the Restaurants vertical – note what it looks before any facet or filter options
- Run a search for “community story about the environment” in the Community Story vertical – note what it looks before any facet or filter options
In the
pages > restaurants.html.hbs
file, make sure that the partials for the facets component are there (and not commented out). This includes:Scripts - just Facets
{{> templates/vertical-full-page-map/script/facets}}
Markup - just Facets
{{> templates/vertical-full-page-map/markup/facets}}
Scripts - Collapsible Filters (some will be commented in already by default)
{{> templates/vertical-full-page-map/collapsible-filters/page-setup }} {{> templates/vertical-full-page-map/script/verticalresultscount }} {{> templates/vertical-full-page-map/script/appliedfilters }}
Markup - Collapsible Filters (some will be commented in already by default)
{{> templates/vertical-full-page-map/markup/verticalresultscount }} {{> templates/vertical-full-page-map/markup/appliedfilters }} {{> templates/vertical-full-page-map/collapsible-filters/markup/filterlink }} {{> templates/vertical-full-page-map/collapsible-filters/markup/viewresultsbutton }}
Additional
<div>
around the facets markup<div class="Answers-filtersWrapper js-answersFiltersWrapper CollapsibleFilters-inactive"> </div>
Pro-tip: You can easily comment-in / comment-out code by using your keyboard commands! Try
cmd + /
on a Mac orctrl + /
on Windows.Here’s a quick video of what this looks like:
Use Live Preview to check to make sure the Facets and FilterLink components are showing up (using the default settings). If not,
- double check to make sure the components are present and there are no typos
- double check you’re on vertical search and not universal search
In the
config > restaurants.json
file, let’s customize how the facets look and behave. Comment in theFacets
object in ComponentSettings.- Set the “showMore” property to “true”
- Set the “expand” property to “false” because you always want the facet options displaying by default (instead of collapsed if not being used)
- Add the “showMoreLimit” property to 3 (note – you’ll need to add this as an additional property!)
Make just the
c_restaurantFeatures
field searchable by adding this in your Facets object:"fields": { "c_restaurantFeatures": { "searchable": true, "searchLabelText": "Search for our features", "placeholderText": "Search" } }
Use Live Preview to verify your updates. It should look like this:
In the
config > restaurants.json
file, let’s customize how the FilterLink component looks. Comment in theFilterLink
object in ComponentSettings.- Set the changeFiltersText to “filters”
Use Live Preview to verify your updates.
Now that you’re done with Restaurants, let’s move on to Community Stories. In the
pages > communitystories.html.hbs
file, make sure that the partials for the facets component are there (and not commented out). This is the same as you did for Restaurants:Scripts - just Facets
{{> templates/vertical-full-page-map/script/facets}}
Markup - just Facets
{{> templates/vertical-full-page-map/markup/facets}}
Scripts - Collapsible Filters (some will be commented in already by default)
{{> templates/vertical-full-page-map/collapsible-filters/page-setup }} {{> templates/vertical-full-page-map/script/verticalresultscount }} {{> templates/vertical-full-page-map/script/appliedfilters }}
Markup - Collapsible Filters (some will be commented in already by default)
{{> templates/vertical-full-page-map/markup/verticalresultscount }} {{> templates/vertical-full-page-map/markup/appliedfilters }} {{> templates/vertical-full-page-map/collapsible-filters/markup/filterlink }} {{> templates/vertical-full-page-map/collapsible-filters/markup/viewresultsbutton }}
Additional
<div>
around the facets markup<div class="Answers-filtersWrapper js-answersFiltersWrapper CollapsibleFilters-inactive"> </div>
Use Live Preview to check to make sure the Facets component is showing up (using the default settings). In the vertical-standard layout, you should see the facets to the left of search results on Desktop and you should see the collapsible filters UI on Tablet/Mobile. If not,
- double check to make sure the components are present and there are no typos
- double check you’re on vertical search and not universal search
You want to update the expand behavior like you did on the Restaurants page. In the
config > communityStories.json
file, comment-in the “Facets” object and set the “expand” property to “false” because you always want the facet options displaying by default (instead of collapsed if not being used). Leave the rest as-is.Use Live Preview to verify your updates.
Commit your code. Monitor the build and try to publish your page in staging. Confirm that your staging URL works as expected.