If you’re already a Hitchhiker, log in to access this content.
Module Assessment| Hitchhikers Platform
You got some feedback from the Turtlehead 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 > Sites > Turtlehead Taco Answers, go on “View Code Editor” and click into the Master branch.
This is your Answers 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”
- Add the Page Template “Vertical-Standard”
- 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 Template “event-standard” - this will use the Event card built in to the theme
config > events.jsonfile properties
- Update pageTitle to be “Event Search”.
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:
- Update the pageTitle to “FAQ Search”
- Change the label for the FAQ vertical. Go to
config > faqs.jsonand 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: Try using your keyboard to remove the comment by using `cmd + /` on 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 build and publish of the site.
Click into your staging environment link and run a search for “events”, just to make sure everything is working properly.
- 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.