<% 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 Track Completed Content Track Completed Pages Track Completed Page Builder Track Completed Search Backend Track Completed Search Frontend Theme 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 Multi-Language Experiences Track Completed Chat 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
Search Backend and Frontend Theme - Final Challenge
Arrow Back
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 want to create a search experience for your jobs site. You’re going to create a separate experience because you want to customize it to your jobs site.

Don’t remember how to create a new experience? See these units for step-by-step instructions on creating a frontend and a configuration from scratch.

Before you start this challenge, make sure you’ve completed all of the modules in both the Search Backend and Search Frontend Theme tracks. The instructions are meant to challenge you and will provide less detail at each step than in the feature-specific modules. Don’t hesitate to reference past modules if you’re stuck or can’t remember!

Your Challenge

Step 1: Create a Backend for the Jobs Search Experience

There are three high level steps to creating a new search vertical (and by extension a new experience):

  • Make sure the data is in Content
  • Create or update the Search configuration
  • Create or update the frontend

You want to create a brand new experience just for jobs and job-related FAQs. Good news is, you already updated the data in the  Content Final Challenge  to add the job entities and custom fields. In this challenge, you’ll focus on creating a new experience with both a new backend config and a new frontend.

  1. Navigate to Search > All Search Experiences, and then click Add Experience. Create a new Search configuration and call it “Jobs Search” with an experience ID of “jobs-search” (note: make sure the experience ID is “jobs-search” with the dash exactly).

  2. Once the experience is added, click Add Vertical. Add a Jobs vertical.

  3. Click Add Vertical to add the FAQs vertical.

  4. Review the searchable fields. If there are any missing, add them by clicking on +Add / Update Fields. If there are any extra ones, uncheck them to remove.

    For Jobs, you want to have:

    • Entity Type (builtin.entityType) as Inferred Filter
    • Location (builtin.location) as Inferred Filter
    • Employment Type as Inferred Filter & Keyword Search
    • Keywords as Phrase Match
    • Name as Keyword Search
    • Job Department (c_jobDepartment) as Inferred Filter

    For FAQs, you want to have:

    • Entity Type (builtin.entityType) as Inferred Filter
    • Keywords as Phrase Match
    • Question as Semantic Search

  5. Save your experience. Try running a few searches in Test Search to make sure it’s working.

  6. Navigate to Content. Create a saved filter for FAQs (name it FAQs on Search - Jobs) that only includes FAQs that:

    • Have Active On Search = Yes
    • Keywords include “career”
    • Fields with data includes “Answer”

  7. Update the FAQ vertical with the saved filter.

  8. Save your Search configuration.

Step 2: Create a Frontend for the Jobs Search Experience

  1. Navigate to Pages > All Sites. Click Add New Site:

    • Choose to store the repository in an internal Yext org.
    • Name the site “Jobs Search”.
    • Create a new repository and add “.com” to the end of what was autofilled (”jobs_search_ [[accountId]].com”, for example: “jobs_search_2499431.com”).
      • While most of this was filled in by default, it is important to check that this is correct and formatted EXACTLY as listed so that we can accurately grade your experience.
      • For reference, you can also find your account ID by looking in the URL or by navigating to Personal Settings and finding the Account ID field.
    • Select the Search Jambo Template to start.

  2. Navigate to the Settings screen of the site and set the username / password for the site in Site Settings. To be consistent with the other sites, let’s use a username of “test” and a password of “test”.

  3. Click into the Code Editor and select the master branch.

  4. Update the locale_config.json file with your experience ID from the Jobs Search backend you created in the previous step. Keep the default locale set to “en”.

  5. Add your universal page using Jambo Commands (Add Page).

    • Page Name: “index”
    • Page Template: “universal-standard”
    • Once the page is created, update the page title to “Job Search” in the index.json file.

  6. Using Jambo Commands, add two new verticals (make sure to map to the vertical keys that are in your backend configuration):

    • Jobs: Name it “jobs”, use the job-standard card template, and use the vertical-standard page template.
    • FAQs: Name it “faqs”, use the faq-accordion card template, and use the vertical-standard template.

  7. Navigate to the config > json files for your two new pages. You decide you want icons for your jobs experience, even though you didn’t use them for your main experience. For both pages:

    • Update the page title to “Job Search” and “FAQ Search” respectively.
    • Comment in and update the icon to “briefcase” for the Jobs vertical and “callout” for the FAQs vertical.

  8. Use Live Preview to preview your changes. If you see a page with desktop/ files, try clicking out of the Code Editor and wait for the build to be completed and refresh the page. Also, if you try to use Live Preview before you create your index page, you’ll need to navigate to desktop > jobs.html or faqs.html directly.

  9. You decide you want to change the mappings for the job card. Add a new card, forking the job-standard card. Name it “job-override”.

    • Update the URL of CTA1 to 'http://careers.turtleheadtacos.com'  – only until your job landing pages are ready to go.
    • Update the subtitle to combine the job department field and the employment type field so the end result on the card looks like this: “[[job department]] | [[employment type]]“, e.g., “Marketing | Full Time”. Be sure to include a space on either side of the |. Hint: You can concatenate items together using +. Try field1 + ‘ | ’ + field2. Remember to use the API names for fields to pull in the correct ones. Check out the View Field API Name (Content) help article.

  10. Update the config > jobs.json file to use the new cardType you just created.

  11. Update the branding for the jobs search like you did for the main brand search. Go to the static > scss > answers-variables.scss file and update:

    • -yxt-color-brand-primary to #32a85e
    • -yxt-color-text-primary to #373a3c
    • -hh-answers-background-color to #efefd4

  12. Preview your changes to make sure things look okay.

  13. Commit your changes then go to the deploys screen. Monitor the deploy for any issues. Once it’s deployed, make sure the most recent deploy is published to staging (this should happen automatically once the deploy is completed!).

Step 3: Iterate on your Search Experience

  1. Go to the staging URL. You will need to input the username and password you set in the Settings screen. Run at least 10 searches.

  2. After identifying some good queries, go to your Jobs Search configuration and add at least three universal prompts. Make sure they highlight both jobs and FAQs. Ensure that the prompts are showing up in Test Search or live preview.

  3. Look over the vertical prompts for each vertical. By default, each vertical already has [[name]] to start with.

    • Add a vertical prompt for jobs vertical: “open jobs in [[c_jobDepartment]]”. The embedded job department field will dynamically surface prompts for users to search for jobs by department.

  4. Make at least three improvements to your experience, either in terms of the UI or the search quality. Use the feedback form in the bottom right of the screen (thumbs up icon) to let us know what you did and show off your work.

  5. Make sure the config labels are up to date and publish your experience that you made from scratch!

Congrats, you did it! You built your own Search experience end to end!

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 a new search config for Jobs Search
Add a jobs vertical to the Jobs Search config
Update the searchable fields for the Jobs vertical
Add an FAQs vertical to the Jobs Search config
Add a saved filter for the FAQs vertical in the Jobs Search config
Update the experience key in the frontend to match the search config
Add an index page to the Jobs Search frontend
Add the Jobs vertical to the frontend
Update the page title for the Jobs vertical
Update the card type for the Jobs vertical
Add the FAQs vertical to the frontend
Add a job override card and update the subtitle
Update the CTA URL on the job override card
Update the branding SCSS variables for the jobs site
Add query suggestions to the Jobs Search config
Common Issues
Common CSS Syntax Issues expand/collapse module
  • Make sure that each rule ends with a semicolon ;, otherwise the CSS will be invalid
  • Check that brackets { } are closed, and any nested CSS is properly contained within its parent container
  • Check that you’re targetting the right class - inspect your preview link to determine what class you should target
  • Ensure your rule is not being overriden by a more specific rule elsewhere in the CSS

For a refresher on CSS basics, review the Introduction to CSS module

Configuration changes not saved or showing a message that there are no changes? expand/collapse module

This is likely because you included an object that was not recognized and the Yext system is removing it from the config and saving any other changes.

If you’re adding something that is top-level, like the synonyms or autocomplete objects, make sure it’s not nested inside of a vertical. Conversely, if you’re adding a searchable field or a saved filter, make sure it is nested appropriately.

Do you have an error for adding searchable fields? expand/collapse module

Here are some things to double check:

  • Did you include all of the fields specified in the challenge? Double check!
  • Did you specify the right type (e.g, nlpFilter vs. textSearch) for each one?
  • Do you have proper comma and quotation syntax for JSON? Look out for red underline and indicators on your scroll bar for errors.
Are you seeing blank search results when you preview your changes? expand/collapse module

Here are some things to double check:

  • Inspect the page and check the console. See whether there are any helpful errors and refer to the Common Console Errors reference doc to see if you are running across any common errors.
  • Make sure that you didn’t delete the experienceKey out of the locale_config.json file by accident.
  • Try clicking Update Preview again and look at the Console. Do you see any errors? If not, try doing another hard refresh once the console says it is completed.
Having an issue with your new card? expand/collapse module

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 adding your new vertical? expand/collapse module

Here are some things to double check:

  • Did you use the right API name for the type? You can double check these in the Manage Entity Types > View Details screen for a specific type.
  • Do you have proper comma and quotation syntax for JSON? Look out for red underline and indicators on your scroll bar for errors.
  • Did you name the type exactly as specified in the challenge? Also - Casing matters! For example, “communitystories” != “communityStories”! The key is the unique identifier so it’s very important to get it right.
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.
Having trouble saving the saved filter ID to Search? expand/collapse module

There are two common causes:

  1. The syntax is off – the property is called “savedSearchId” (case sensitive) and the filter ID should be encased in quotations (the filter ID can be an alphanumeric string, it’s just that those created in the UI happen to be numeric)

  2. The filter is invalid. Make sure you’re copying a valid filter ID from account settings.

Previous Submissions
Attempt #<% submission.attemptNumber %>
<% submission.date %>
Score: <% submission.numericScore %>
Pending
Feedback
<% elem.innerText %>