Module Assessment | Yext Hitchhikers Platform

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

Background

Now that you have had some experience updating various parts of the Search Frontend using the Theme, it’s time to put it all together! Your brand wants to add two verticals from scratch to their search experience: Menu Items and Help Articles.

This will test your ability to:

Add results pages
Update page layouts and page config settings
Add and customize new cards

Your Challenge

Step 1: Add Help Articles Vertical

Navigate to Pages > Brand 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. As you go through the following steps, be sure to continuously check your live preview to verify your work.
Select Jambo Command > Add Vertical. Make sure to use the following and then click Submit:
- Page Name: ‘help’
- Vertical Key: Use the vertical key for Help Articles from the search configuration
- Card Name: ‘document-standard’
- Page Template: ‘vertical-standard’
Open up the config > help.json file:
- Update the page title to “Help Article Search”
Open up the Live Preview and run one or all of these searches to see your updates in action:
- where to reset password
- when can i place an online order
- how can i track my delivery status?
- where to redeem gift cards
- how can i place an order on your site
- where to check my rewards
Commit your changes.
Select “Back to Code Editor” to keep editing.

Add the vertical to the frontend using the Add Vertical Jambo command.
- Page Name: ‘menu-items’
- Vertical Key: Use the vertical key for Menu Items from the search configuration
- Card Name: ‘product-prominentimage (you’ll make a new card shortly)
- Page Template: ‘vertical-grid’

Can’t remember how to add and customize pages? You can refresh your memory by revisiting the Results Page module.

Make changes to the menu item card by using the Add Card Jambo command to fork the product-prominentimage card. Call it “menu-item”.

Can’t remember how to add cards? You can refresh your memory by revisiting the Customize Result Cards unit.

In the config > menu-items.json file, update the following:
- Update the cardType to your new card, so you can preview your changes in the next step as you go.
- Update the page title to “Menu Item Search”.
Since the card we forked from is made for products, none of the fields are mapped to our menu item fields - all we see in Live Preview are the names of the menu items! Navigate to the cards > menu-item > component.js file and update the following data mappings:
- Map the image property to the Primary Photo field - based on the way the field is structured, use profile.primaryPhoto.image.url.
- For CTA1, hardcode the CTA label as “Order Now” and map the CTA URL to the landing page URL field
  - Hint: you don’t need a formatter wrapped around the landing page URL field since it’s not a CTA field type – you can simply add the field on its own.
  - If you need help finding the field API name, check out the View Field API Name (Knowledge Graph) help article.
- Update the mapping for subtitle to show calories. Format it as: profile.c_calories + ' calories'.
- Map the details property to profile.description.
- You don’t want long descriptions to take up too much space. Comment in the entire showMoreDetails object and add the showMoreLimit property with a value of 250 (characters).

Can’t remember how to update cards? You can refresh your memory by revisiting the Result Cards module.

Go back to live preview. Notice that the results of menu items vertical appear as a three-column grid. Visually this looks a bit cramped, so you decide that you prefer to have fewer columns in the grid. Let’s go with two columns.

To update the grid within the vertical results, navigate to pages > menu-items.html.hbs and edit the following line:

   <div
     class="Answers-mainContent js-answersMainContent Hitchhiker-3-columns"
   ></div>

Change the “3” to a “2” so it looks like this:

   <div
     class="Answers-mainContent js-answersMainContent Hitchhiker-2-columns"
   ></div>

Compare the three-column grid on universal search vs. the two-column grid on the Menu Items vertical search. The brand team likes that better!

To update the grid within the universal results, configure the config > menu-items.json file:
- Update universalSectionTemplate from “grid-three-columns” to “grid-two-columns”.
Commit your changes.
Monitor the build and publish.

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

Update the page title on the Help Articles vertical

Add the Menu Items vertical to the frontend

Set the card type for the Menu Items vertical

Update the page title for the Menu Items vertical

Add a menu item card and update the image

Update the CTA on the menu item card

Update the subtitle on the menu item card

Update the details on the menu item card

Update the show more limit on the menu item card

Change the grid for menu items on universal search

Change the grid for menu items on vertical search

Common Issues

Having an issue with your new card?

Here are some things to double check:

Do you have syntax errors? Look out for red underline and indicators on your scroll bar in the code editor for errors.
Are you using any slanted or curved quotation marks instead of straight quotation marks? If you copy and pasted anything that includes quotation marks, make sure you’re only using straight quotation marks.
Make sure you included profile. before any fields mapped from the Knowledge Graph in your JavaScript. This is what tells the system to pull the field value from the entity profile. For example, if you want to use the Theme custom field, it should be referenced as profile.c_theme.
If you used double quotes (") for any hardcoded JavaScript content, try using single quotes (').
Make sure you spelled everything exactly as specified in the challenge!
Make sure the card name is as specified in the challenge and that you properly mapped to it on the [pageName].json file.
Make sure any formatters you use are spelled correctly. You can learn about commonly used formatters in the Common Formatters reference.
Space out your code for legibility. This won’t change your end result, but it is good practice to help others who are reviewing your code. For example:
```
`attribute: profile.c_field+profile.c_field+' | '+' Job'`
`attribute: profile.c_field + profile.c_field + ' | ' + ' Job'`
```

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 underlines and indicators on the scroll bar in the code editor for errors.
The vertical key is case sensitive. Make sure the verticalKey matches exactly to the vertical key in your Search configuration. (For example, faqs instead of FAQs.)
There are two places you have to add the vertical key for each vertical page: in the top level and in the verticalsToConfig object. Check to make sure the vertical key is present in both.
Make sure you remove the < > characters anywhere it says < REPLACE ME >.
Make sure the page names are exactly as specified. For example, it should be “Event Search,” not “Events Search.”
The card names must exactly match the card names in the theme or in your Cards directory.

Previous Submissions

Attempt #<% submission.attemptNumber %>

<% submission.date %>

Score: <% submission.numericScore %>

Pending

<% elem.innerText %>

Module Assessment | Yext Hitchhikers Platform

Background

Your Challenge

Step 1: Add Help Articles Vertical

Step 2: Add Menu Items Vertical