Module Assessment | Yext Hitchhikers Platform
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.
Step 2: Add Menu Items Vertical
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”.
- Update the
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, useprofile.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 toprofile.description
. - You don’t want long descriptions to take up too much space. Comment in the entire
showMoreDetails
object and add theshowMoreLimit
property with a value of 250 (characters).
- Map the
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”.
- Update
Commit your changes.
Monitor the build and publish.
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 asprofile.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'`
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 ofFAQs
.) - 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.