Module Assessment | Yext Hitchhikers Platform
You got some feedback from the Turtlehead Tacos 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 it’s defaulting to the Standard Card. Let’s add a new Event Page and use the built in Event Card!
You were also given a handful of other changes from the Turtlehead team that you can incorporate across the different verticals.
Navigate to Pages > Turtlehead Taco 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 that the results aren’t configured! This is because you haven’t specified any information about the events vertical in your frontend. We’ll do that now.
Create the Events page. Click on Tools > Jambo Commands and select “Add Vertical”. Make sure that:
- Add the Page Name as “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.
- Use the Card Name “event-standard” - this will use the event card built in to the theme
- Add the Page Template “vertical-standard”
config > events.jsonfile properties:
- Update pageTitle to be “Event Search”.
Open the Code Editor console by clicking on Tools > Console. Whenever you 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 successful and return to your Live Preview tab and do a hard-refresh on the “events” search. 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.jsonfile.
- Update the cardType from “standard” to “location-standard” so it’s optimized for location-based entities.
- Update pageTitle to be more specific as that’s a best practice for search engines. Update it to “Restaurant Search”.
Click out of code editing, 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 “Restaurants”. Look at what a difference!
Run a search for “faqs”. You decide you want to configure the
config > faqs.jsonfile:
- 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 code editing, 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 a search for “events”, just to make sure everything is working properly.
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.