Module Assessment | Yext Hitchhikers Platform
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 orctrl + /
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.
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.