Module Assessment | Yext Hitchhikers Platform

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

Background

You are ready to spice up your Events and Restaurant cards! This is what you want them to look like:

Event Card with updated CTA label "Join Us"

Restaurant Card with added services list

To get your cards to look like this, you will need to follow the general steps:

  1. Fork a card using Jambo Commands
  2. Update the component.js file to customize the card settings
  3. Update the card type to the new forked card within the vertical page

Your Challenge:

Step 1: Add an Events Card

  1. 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.

  2. Click “View Live Preview” to open your preview in a new tab.

  3. Run a search for “events” – this is what it looks like now, which is way better than before the last module but you want to make it even more specific to the brand.

  4. You want to customize the event card so you’ll need to fork it from the theme. Go to Tools > Jambo Commands and select “Add Card”.

    • Card Name: “event-override”
    • Template Card Folder: “cards/event-standard”

    Jambo will create a new folder in the cards directory for “event-override” with a component.js and template.hbs file.

  5. Navigate to config > events.json file and update the cardType to “event-override” so that the page references the card you just created.

  6. Update your events results by navigating to cards > event-override > component.js

    • Instead of “RSVP” as the CTA label for CTA1, change it to Join Us.
    • You want the “Join Us” CTA to open the link in a new tab. Change the link target to '_blank' instead of the variable linkTarget.
  7. Click out of the code editor and wait for the console logs to say your latest build was successful. Then, go to your live preview tab and refresh the results. Make sure this looks how you want it to.

Step 2: Add a Restaurant Card

  1. You want to customize the card for Restaurants. Create another card with:

    • Card Name: “restaurant”
    • Template Card Folder: “cards/location-standard”
  2. Navigate to config > restaurants.json file and update the cardType to “restaurant”.

  3. Update your Restaurants results by navigating to cards > restaurant > component.js.

  4. You want to add the Restaurant Features field to the card. If you recall from  Data Modeling Challenge , this includes information like whether the location has live music or is pet-friendly.

    • Comment-in the services attribute.
    • Map to the c_restaurantFeatures field (hint: remove the brackets – since this field is a list-type field, you don’t need them and you don’t need to use any formatters like joinList). Remember that you reference fields from the entity with profile..
  5. Click out of the code editor and wait for the console logs to say your latest build was successful. Then, go to your live preview tab and refresh the results. Make sure everything looks correct.

  6. Commit your changes and add a commit message.

  7. Monitor the build to make sure it is successful.

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 an event override card and update the label
Update the link target on the event override card
Update the services property on the restaurant card
Common Issues
Are you seeing blank search results when you preview your changes? expand/collapse module

Here are some things to double check:

  • Right-click to Inspect the page and open the developer console. See whether there are any errors, and refer to the Common Console Errors reference to see if you are running into any common errors.
  • Make sure that you didn’t delete the experienceKey out of the locale_config.json file by accident.
  • With the developer console open, try clicking Update Preview again. Do you see any console errors? If not, try hard-refreshing the page (cmd + shift + R or ctrl + shift + R) 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 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'`
Previous Submissions
Attempt #<% submission.attemptNumber %>
<% submission.date %>
Score: <% submission.numericScore %>
Pending