Adding & Updating Cards | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

• How Cards work
• What Cards are built-in to the Theme
• How to Add new Cards

What are Cards?

As you learned in the previous unit, the Pages config file also references a Card type which represents the result card shown in results for each vertical.

Here are some example cards that are built-in to the theme:

Location-standard card

FAQ-accordion card

Job-standard card

Cards can either display data from the Knowledge Graph or hardcoded content specified in the repository. You can create a card type specific to each vertical or reuse cards across verticals.

Remember:

Cards Built-in to the Theme

Each Card in the Answers Hitchhikers Theme is represented by two different files:

• the card > component.js file that specifies the data mappings
• the card > template.hbs file that specifies the layout of the card

We will have a number of built-in card types in the Theme for Admins or Developers to easily add to their experience, including but not limited to:

• standard
• faq-accordion
• location-standard
• event-standard
• job-standard
• link-standard
• menuitem-standard
• professional-location
• professional-standard
• product-standard
• product-prominentimage
• documentsearch-standard

In case you didn’t pick up on it, the Cards included in the theme have a naming convention of: [commonEntityTypeName]-[description]

You’ll see more cards added to the library over time.

We also have “multi-language” versions of each built-in card type prefixed with “multilang-”. These are already preconfigured for translations. If you are just building a single language English experience, we recommend that you use the standard cards. If you are building a multi-language experience, you should definitely take advantage of the multi-language cards for translations. You can learn more about how to build multi-language experiences in the Multi-Language Search module .

Setting the Card Type

When you set the cardType on a Page, you are specifying what kind of card you want to use for that page. You can choose to specify a card from the Theme directly, or you can Add a New Card using Jambo Commands.

As mentioned in the Pages unit, the Universal Page will display the cards for each vertical as indicated in the JSON file by default. However, you can override this by specifying the full vertical in the verticalsToConfig object in the index.json file. This is a convenience layer to reduce duplicative work but also provide flexibility to change things between Universal and Vertical search pages, if desired.

Note that card names in the theme are case sensitive. Make sure that you specify the card name exactly as it exists in the theme or in your repository. If you specify the wrong card name, you’ll see that the results won’t render on the page. If this happens, you can inspect the page and go to the Console tab.

You should see an error that looks something like this: Caused By: Error: Component type jobs-standard is not recognized as a valid component. You might have meant job-standard?

Use this to help you debug!

Customizing Cards

When you add a new card using Jambo Commands, you are forking whichever card template you select and can thus customize it as desired. If one of the built-in cards satisfies your requirements, you should definitely use it – no need to create a new card for no reason. That said, common reasons for needing to create a new card are:

• Wanting to override data mappings
• Wanting to adjust the CTAs
• Customizing the event types for clicks in analytics
• Customizing the card layout

Adding a New Card

To add a new card, you can fork a card from the theme by:

1. Select Tools > Jambo Commands > Add Card in the Yext Code Editor.
2. Choose the card template you want to fork. You should choose whichever template you think is closest to what you are looking to do.
3. Name the card. We recommend you name the card something simple but obvious to other users that may come in after you to make adjustments.
4. Add the card.

You’ll learn more about customizing card data mappings in the next module – Data Mappings & CTAs .