Module Assessment | Yext Hitchhikers Platform

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

Background

The brand 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 are also heavily pushing their 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

Step 1: Add a Third CTA on Restaurants Card

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.
Click “View Live Preview” to open your preview in a new tab.
Run a search for “restaurants” – this is what it looks like now with the default two CTAs.
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 content mappings. You’ll want to define a third CTA with:
- A label of View Menu
- An icon of info
- A URL of https://www.turtleheadtacos.com/menu
- The event type CTA_CLICK
Copy one of the existing CTA objects in the card, paste it below the existing CTA objects, and make changes. It’ll look something like the below:
```
      CTA3: { // The tertiary call to action for the card
        label: '<REPLACE_ME>',
        iconName: '<REPLACE_ME>',
        url: '<REPLACE_ME>',
        target: linkTarget,
        eventType: '<REPLACE_ME>',
        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 a reference to the third CTA there. You need to do two things:

Add to the if statement to see if the new CTA3 field has the data populated
Add a partial for CTA3 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 HitchhikerLocationCard-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 static > scss > 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 and add the following HTML. We want this to appear below the navigation bar, but above the results. For context, this is where the HTML should be placed.
```
<div class="Answers-banner">
  To be notified of upcoming events, <a href="https://www.turtleheadtacos.com/signup">sign up here</a>.
</div>
```

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 static > scss > answers.scss file, within the .Answers class. You’ll now have this banner appear on your Events vertical search.

  &-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;
      }
    }
  }

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

Add a third CTA in the JS file for the restaurant card

Add a third CTA in the HBS file for the restaurant card

Add SCSS styling for the third CTA on the restaurant card

Add a banner in the HBS file for the Events vertical

Add SCSS styling for a banner in the Events vertical

Previous Submissions

Attempt #<% submission.attemptNumber %>

<% submission.date %>

Score: <% submission.numericScore %>

Pending

<% elem.innerText %>

Module Assessment | Yext Hitchhikers Platform

Background

Your Challenge

Step 1: Add a Third CTA on Restaurants Card

Step 2: Add a Banner to Events Page