Module Assessment | Yext Hitchhikers Platform

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

Background

You want to ensure that events are returned in chronological order by default. This will let users view the most relevant event first. That said, you still want to allow users to change the sort order by event name, relevance OR event date.

To accomplish this you will need to:

Update the front end to include on-page sorting for users once they’ve conducted a search.
Update the Search Configuration to change how the algorithm sorts by default.

Your Challenge

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 “events” in the Events vertical (not on universal search - remember that frontend sorting is only available on vertical search) – note how it looks without any ability to sort!

Like with Facets, go to the pages > events.html.hbs file and make sure that the sortoptions component partials are included, along with the collapsible filters components and page setup. Since you want to use the collapsible filters UI, you’ll need all of the following:

Pro-tip: You can easily comment in / comment out code by using your keyboard commands! Try cmd + / on a Mac or ctrl + / on Windows.

Scripts - just Sorting

 {{> templates/vertical-standard/script/sortoptions}}

You’ll also want to comment in the surrounding <div> that the Sorting script is part of.

 <div class="Answers-filtersWrapper js-answersFiltersWrapper CollapsibleFilters-inactive">
 </div>

Markup - just Sorting

 {{> templates/vertical-standard/markup/sortoptions}}

Scripts - Collapsible Filters (some will be commented in already by default)

 {{> templates/vertical-standard/collapsible-filters/page-setup }}
 {{> templates/vertical-standard/script/appliedfilters }}
 {{> templates/vertical-standard/script/verticalresultscount }}

Markup - Collapsible Filters (some will be commented in already by default)

 {{> templates/vertical-standard/markup/verticalresultscount }} 
 {{> templates/vertical-standard/markup/appliedfilters }} 
 {{> templates/vertical-standard/collapsible-filters/markup/filterlink }}
 {{> templates/vertical-standard/collapsible-filters/markup/viewresultsbutton }}

Go to the config > events.json and add the SortOptions object to ComponentSettings. You want to allow users to sort by the following (in addition to the default sort):
- Event name - fill in: type as “FIELD”, field as “name”, direction as ascending (“ASC”), and label as “Event Name”
- Event start date - fill in: type is “FIELD”, field is “time.start”, direction ascending (“ASC”) and label “Event Date”
Here’s a template, input the values per above.
```
"SortOptions" : {
  "options": [
    {
      "type": "<INSERT HERE>",
      "field": "<INSERT HERE>",
      "direction": "<INSERT HERE>",
      "label": "<INSERT HERE>"
    },
    {
      "type": "<INSERT HERE>",
      "field": "<INSERT HERE>",
      "direction": "<INSERT HERE>",
      "label": "<INSERT HERE>"
    }
  ]
}
```
Click out of code editing to trigger a live preview update. You can open the Code Editor console (Tools > Conole) to check when the update is complete. Make sure to look at the console for any errors. Check out what you have so far by refreshing your preview. Try sorting by date and then by event name. How do you think it looks? If you aren’t able to get it working, check your code to make sure you don’t have any syntax errors like missing quotations or commas (you might see red squiggly underlines).
Let’s make some more adjustments to the SortOptions object. You want to change:
- the legend “label” to say “Sort Options” instead of “Sorting” (default value).
- the “defaultSortLabel” to say “Most Relevant” instead of “Best Match”
Check the library documentation to confirm what the property names should be and then add to the SortOptions object. Remember that these should be added on the same level as “options” and not within the options array.
Confirm it looks how you want using Live Preview and then commit your changes. Make sure to monitor the build and then publish your experience. Congrats, you’ve added your on-page sorting!
Time to add the Search Configuration sorting to override how the Algorithm sorts by default. Navigate to Search > All Search Experiences > Verticals. On the algorithm side, we want to sort the events first by relevance and then, all else being equal, by start date/time.
Run a search in the “Test Search” console for “events”. This should match the same events you see in your Live Preview.
Now let’s update your config. First thing we need to do is add any fields that will be used in sortBys to Searchable Fields. Select the “Events” vertical in the dropdown and add “Start (time.start)” as a “Sortable” searchable field for the Events vertical.
Next, we want to update the Default Sort Order (known as the sortBys object in the JSON Code Editor) which is also part of the Vertical configuration. Click “+Add Sorting Rule”. First, you want to sort by RELEVANCE and then by FIELD. For the FIELD sorting rule, you want to use the Start (time.start) field and direction Ascending (ASC).
Save the Search Config.
Rerun your query for “events” – look how they’re sorted now!
One last thing – You want to make sure past events don’t surface in the experience so you’ll also create a saved filter with the following criteria:
- “End Date/Time” is in the future
- “Entity Type” is Event
- Name the filter “Events in the Future”
Add the Saved Filter you just created to the Events vertical under Additional Vertical Settings.
Save your configuration.
Rerun your search and verify your changes! Make sure that it looks good before updating your Production label.

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 the sort options code to the events.html.hbs file

Update the main label and default search label in Sort Options in the events.json file

Update the Events config file for sorting options

Sort the Events vertical results by Relevance and Event Time in the config

Add Event time to searchable fields for sorting

Add a new saved filter for Events

Add a saved filter to the Events vertical config

Common Issues

Having trouble saving the saved filter ID to Search?

There are two common causes:

The syntax is off – the property is called “savedSearchId” (case sensitive) and the filter ID should be encased in quotations (the filter ID can be an alphanumeric string, it’s just that those created in the UI happen to be numeric)
The filter is invalid. Make sure you’re copying a valid filter ID from account settings.

Previous Submissions

Attempt #<% submission.attemptNumber %>

<% submission.date %>

Score: <% submission.numericScore %>

Pending

Feedback

<% elem.innerText %>