Module Assessment | Yext Hitchhikers Platform

You must include a first name and last name in your profile to create challenge environments.

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)
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 or ctrl + / on Windows.

Here’s a quick video of what this looks like: comment in facets

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 the Facets 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 the FilterLink 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.

Module Assessment

+<% util.points %> points

Weekly Challenge Streak: <% util.streakWeekly %>

You must include a first name and last name in your profile to create challenge environments.

Challenge account expires in <% util.expirationHours > 24 ? Math.round((util.expirationHours * 1.0) / 24) : util.expirationHours %> <% util.expirationHours > 24 ? (Math.round((util.expirationHours * 1.0) / 24) == 1 ? 'day' : 'days') : (util.expirationHours == 1 ? 'hour' : 'hours') %>.

Challenge account has expired. Please create a new account.

Report Card

Add fields as facets to Restaurant vertical in config

Add facet fields to the Community Story vertical searchable fields

Add the facets code to the restaurants.html.hbs file

Update the Restaurants config file to add Facets component

Add the facets configuration to the communitystories.json file

Add the facets code to the communitystories.html.hbs file

Previous Submissions

Attempt #<% submission.attemptNumber %>

<% submission.date %>

Score: <% submission.numericScore %>

Pending

Feedback

<% elem.innerText %>