Module Assessment | Yext Hitchhikers Platform

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

Background

Turtlehead Tacos is really happy with their Search experience so far, but is noticing that they’re getting a lot of calls to locations about where to find their menu. They want to add a clear Call to Action on their Restaurants cards to direct users to the menu.

They also are heavily pushing their Turtlehead Tacos events, and want to encourage people to sign up to be notified via email for any new events that are added. To do this, they’d like to add a large banner at the top of the Events vertical page to encourage sign-ups.

Your Challenge

Navigate to Pages > Turtlehead Taco 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.
Click “View Live Preview” to open your preview in a new tab.

Navigate to your restaurant custom card - we’re going to add a third CTA, “View Menu”. First, open the component.js file to update the mappings. You’ll want to define a third CTA with a label of View Menu, an icon of info, and a URL of https://www.turtleheadtacos.com/menu. Add the below snippet underneath the existing CTA objects.

      CTA3: { // The tertiary call to action for the card
        label: '<REPLACE_ME>',
        iconName: '<REPLACE_ME>',
        url: '<REPLACE_ME>',
        target: '_top',
        eventType: 'CTA_CLICK',
        eventOptions: this.addDefaultEventOptions(),
      }

Now that we are supplying the data, we need to define where this appears in the template. Go to the template.hbs file for the restaurant card. Find the ctas partial and add the reference to the third CTA there. You’ll notice that we need to add to the if statement to see if the new CTA3 field has the data populated, as well as listing the partial within the ctasWrapper div. It should look like the below:
```
{{#*inline 'ctas'}}
{{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url) (all card.CTA3 card.CTA3.url))}}
<div class="HitchhikerLocationStandard-ctasWrapper">
  {{> CTA card.CTA1 ctaName="primaryCTA" }}
  {{> CTA card.CTA2 ctaName="secondaryCTA" }}
  {{> CTA card.CTA3 ctaName="tertiaryCTA" }}
</div>
{{/if}}
{{/inline}}
```
Make sure you are referencing this custom card in your config/restaurants.json
Update your preview and take a look at the location cards. We’re almost there, but it looks like we need to add a bit of spacing between the CTAs. Copy the following CSS and place it in the answers.scss file, within the .Answers class.
```
  .HitchhikerLocationStandard-primaryCTA, 
  .HitchhikerLocationStandard-secondaryCTA, 
  .HitchhikerLocationStandard-tertiaryCTA {
    display: flex;
    margin-top: calc(var(--hh-location-standard-base-spacing) / 2);
  }
```
Your card should now look like this!
Now we’ll focus on adding a hardcoded banner to the Events vertical page. Navigate to your pages/events.html.hbs file. We want this to appear below the navigation bar, but above the results.
```
  <div class="Answers-banner">
    To be notified of upcoming events, <a href="https://www.turtleheadtacos.com/signup">sign up here</a>.
  </div>
```
For context, this is where the HTML should be placed.

Update your preview and look at the Events vertical. This looks pretty bad since there’s no styling - let’s fix that. Paste the below CSS in your answers.scss file, within the .Answers class.

  &-banner {
    text-align: center;
    width: var(--hh-answers-container-width);
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem;
    background-color: var(--yxt-color-brand-primary);
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 1rem;

    a {
      text-decoration: underline;

      &:hover {
        text-decoration: none;
      }
    }
  }

You’ll now have this banner appear on your Events vertical search.

Update your preview and look at your changes. Looking much better!
Commit your changes. Monitor the deploy and publish your staging experience.

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

Update the JS for the Third CTA

Update the HBS for the Third CTA

Update the CSS for the Third CTA

Update the HBS for the Events Banner

Update the CSS for the Events Banner

Previous Submissions

Attempt #<% submission.attemptNumber %>

<% submission.date %>

Score: <% submission.numericScore %>

Pending

Feedback

<% elem.innerText %>