Module Assessment | Yext Hitchhikers Platform

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

Background

You got some feedback from the team that the Events vertical frontend could be improved to make the interface more engaging. You haven’t actually specified anything for it in the frontend so there’s no vertical page and no result card. Let’s add a new event page and use the built-in event card!

You were also given a handful of other changes for the existing FAQs and Restaurants verticals that you can incorporate.

Your Challenge

Navigate to Pages > Brand Search > Deploys. Go to the Code Editor, and click into the master branch.
This is your Search frontend repo! You should expect this to take a couple minutes to load – in the background, it’s starting up a container for your development.
When the page loads, click on “View Live Preview” to open in a new tab. Run a search for “events” – you’ll see a section for “events” (note the lowercase) with a table of whitespace and no vertical tab. This is because you haven’t specified any information about the events vertical in your frontend. We’ll do that now.

Note

As you click around and run searches, you might notice a few verticals appear without cards. Don’t be alarmed - this is because we’ve configured the backend already, but haven’t set up the results in the frontend yet. We’ll do this in the next few modules.
Create the Events page. Click on Tools > Jambo Commands and select “Add Vertical”. Use the setup:
- Page Name: “events”
- Update the verticalKey - this should be the same as the verticalKey in your Search configuration. Open up your Search configuration in a separate tab to verify.
- Card Name: “event-standard” - this will use the event card built in to the theme
- Page Template “vertical-standard”
Configure the config > events.json file properties:
- Update pageTitle to be “Event Search”.
Open the Code Editor console by clicking on Tools > Console. Whenever you make a change and click out of the code editor, we will automatically initiate a fresh build of your site so you can preview your changes. Click out of the code editor, wait for the console to say the update was completed and return to your Live Preview tab and do a hard refresh for the “events” query. Look at what a difference!
Run a search for “restaurants”. Your restaurant vertical is looking sad. Let’s make it a bit better. Open up the config > restaurants.json file.
- Update the cardType from “standard” to “location-standard” so it’s optimized for location-based entities.
- Update pageTitle to “Restaurant Search” to be more specific as that’s a best practice for search engines.
Click out of the Code Editor, wait for the console to say the update was completed. Then return to your Live Preview tab and do a hard refresh for the “restaurants” query. Look at what a difference!
Run a search for “faqs”. Notice the cards are not displaying the FAQ answer. We’re using the new rich text field for the answer that appears on the card, so we have to configure the backend to send data in the updated format.
- Navigate to the JSON editor for your Search config. Then add the top-level property richTextV2ToHTML and set it to true. It’ll look like this:
```
{
"$schema": "https://schema.yext.com/config/answers/answers-config/v1",
"$id": "brand-search",
"name": "Brand Search",
"verticals": {},
"richTextV2ToHTML": true,
}
```
Refresh Live Preview to see the change. Now that FAQ cards are showing content, you decide you want to configure the page a bit:
- Update the pageTitle to “FAQ Search”
- Change the label for the FAQ vertical. In the verticalsToConfig object you’ll see a property called “label” that is commented out. Remove the // and update the property to “Frequently Asked Questions”.
Pro-tip: You can easily comment in / comment out code by using your keyboard commands! Try cmd + / on a Mac or ctrl + / on Windows.
Click out of the code editor, wait for the console to say the update was successful and return to your Live Preview tab and do a hard refresh. Run a search for “faqs”. Look at what a difference!
Commit your changes and add a commit message.
Monitor the deploy of the site.
Click into your staging link and run searches for “events” and “faqs”, just to make sure everything is working properly.

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 Events vertical to the frontend

Set the card type for the Events vertical

Update page title on the Events vertical

Update the card type on the Restaurants vertical

Update the page title on the Restaurants vertical

Update the label for the FAQs vertical

Update the page title for the FAQs vertical

Set richTextV2ToHTML to true in the config

Common Issues

Getting an error for your new Page?

Here are some things to double check:

Do you have proper comma and quotation syntax for JSON? Look out for red underline and indicators on your scroll bar in the Code Editor for errors.
Make sure the verticalKey matches exactly (case sensitive) to the verticalKey in your Search Configuration. For example, it should be “faqs” not “FAQs”.
There are two places you have to add verticalKey for each vertical page – once in the top level and again in the verticalsToConfig object. Make sure you didn’t forget one of these!
Make sure you remove the < and > characters anywhere it says “< REPLACE ME >“. Those are meant to be removed as well!
Make sure the Page Names are exactly as specified. For example, it should be “Event Search” not “Events Search”
The card names must match exactly the card names in the Theme or in your Cards directory.

Previous Submissions

Attempt #<% submission.attemptNumber %>

<% submission.date %>

Score: <% submission.numericScore %>

Pending

<% elem.innerText %>