<% user.full_name %>
<% util.level ? util.level.title : '' %>
Explorer Pioneer Apollo Viking Voyager Pathfinder Orion
Points
<% user.points ? user.points.toLocaleString() : 0 %>
Badges
<% util.badgeCount %>
Streaks
Congratulations You've <% util.newestBadge.isCurriculum ? 'completed' : 'earned' %> the
<% util.newestBadge.title %> <% util.newestBadge.isCurriculum ? 'curriculum' : 'badge' %>!
previous
next
Share to Social Media
Linked In Facebook
Status
<% util.level ? util.level.title : '' %>
<% util.level ? util.level.points : '' %>
<% util.nextLevel ? util.nextLevel.title : '' %>
<% util.nextLevel ? util.nextLevel.points : '' %>
Level up! <% util.levelPointsRemaining %> points to go
Level up! <% util.levelPointsRemaining %> points to go
Badges
Completed Hitchhikers Program Track Completed Knowledge Graph Track Completed Pages Track Completed Page Builder Track Completed Search Track Completed Search: Advanced Track Completed Search UI React Track Completed Solution Templates and the Admin Console Track Completed Technical Skills Track Completed Platform Basics Track Completed Listings Track Completed Reviews Track Completed Industry Overview Track Completed Analytics Track Completed Industry Overview & Product Basics Track Completed Knowledge Assistant Track Completed Multi-Language Experiences Track Completed Fall '22 Release Highlights Track
<% util.expandBadges ? 'Less' : 'More' %>
Playground Accounts
New +
No Playground Accounts
Create Playground +
View Profile
Log Out loading
Mission Complete! 🚀
Congratulations, you’ve completed your first module!

We hope you enjoy exploring the rest of the site. Please don’t forget to leave us feedback - we are constantly looking to improve. Happy Hitchhiking!
Home
Welcome to Hitchhikers! 👋
To learn more about the platform we encourage you to get started by completing the Hitchhikers Program Track and earning your first badge!
Start Here
Close notification
Core Frontend - Adding Pages & Cards
Arrow Back
Unit 1
Frontend UI Refresher
completed
Unit 2
Global Settings & Locale Configuration
completed
Unit 3
Adding & Updating Pages
completed
Unit 4
Customizing Your Pages
completed
Unit 5
Configuring No Results
completed
Unit 6
Adding & Updating Cards
completed
Unit 7
Adding Images
completed
Unit 8
Putting it All Together
completed
assessment assessment
Module Assessment
completed completed
home

Module Assessment | Yext Hitchhikers Platform

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

Background

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.

Your Challenge

  1. Navigate to Pages > Turtlehead Taco Search > Deploys, go to the Code Editor, and click into the master branch.

  2. 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.

  3. 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.

  4. 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”

  5. Configure the config > events.json file properties:

    • Update pageTitle to be “Event Search”.

  6. 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!

  7. 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 be more specific as that’s a best practice for search engines. Update it to “Restaurant Search”.

  8. 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!

  9. Run a search for “faqs”. You decide you want to configure the config > faqs.json file:

    • 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.

  10. 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!

  11. Commit your changes and add a commit message.

  12. Monitor the deploy of the site.

  13. Click into your staging link and run a search for “events”, just to make sure everything is working properly.

Module Assessment
+<% util.points %> points
loading
Weekly Challenge Streak 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 events page and update verticalKey, pageTitle, and cardType
Update cardType and pageTitle for the Restaurant config
Update the label for the FAQs page
Common Issues
Getting an error for your new Page? expand/collapse module

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
Feedback
<% elem.innerText %>