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 (Content) 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 quotation marks instead of straight quotation marks? If you copy and pasted anything that includes quotations, make sure they don’t include any fancy slanted quotations as those are not code-friendly!
Make sure you included “profile.” before any fields mapped from Content in your JS. This is telling the system to pull it from the profile. For example, if you want to use the theme custom field, it should be “profile.c_theme” and not “c_theme”.
If you used double quotes for any hardcoded content, try using single quotes. The graders can be a bit finnicky! In general, you should be consistent with either single or double quotes in your code, but in general we prefer to use single quotes in JavaScript.
Make sure you spelled everything correctly and exactly as specified in the challenge! A computer is grading you on whether you did it right which means that spelling matters!
Make sure the card name is as specified in the challenge and that you properly mapped to it on the [pageName].json file.
Any formatters you use are spelled correctly. You can find the formatters and you can read about commonly used ones in the Common Formatters reference doc.
Space out your code for legibility. This won’t actually change your end result, but it will help others who are reviewing your code (including our auto-graders!). Think about it – which of the following is easiest to read? Hint: the second one!
```
`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 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 %>

Module Assessment | Yext Hitchhikers Platform

Background

Your Challenge

Step 1: Add Help Articles Vertical

Step 2: Add Menu Items Vertical