Back
Standard Data Mappings | Yext Hitchhikers Platform
What You’ll Learn
In this section, you will learn:
- Our standard cards and recommendations for use
- Default data mappings
Overview
As discussed in the previous module, each search result is referred to as a card. There are different layouts of these cards that best fit different use cases, all contained in your theme.
You can see the available cards in our theme by navigating to themes > answers-hitchhiker-theme > cards. You’ll see each folder within cards representing a different kind of card - Accordion, Event, Job, Location and Standard.
You’ll see two files within each folder:
- the card > component.js file that specifies the data mappings
- the card > template.hbs file that specifies the layout of the card
We’ll walk through how to understand how these built-in cards are defined so that you can fork and create your new versions!
Card Template
Clicking into the Standard card folder on the template.hbs file, you’ll see a handlebars template controlling the section of a card and its layout. You typically will not need to update these templates; if you need to define your own card template, you’ll learn how to do so in the
Advanced Frontend - Changing Page or Card Structure
.
Card Javascript
This will be the majority of what you’ll update for your own custom cards. This file defines how the data on an entity profile is mapped to the sections of a card, as well as some other configuration options. Clicking into the Standard card folder on the component.js file, you’ll see the following contents.
{{> cards/card_component componentName='StandardCard'}}
class StandardCardComponent extends BaseCard.StandardCard {
constructor(config = {}, systemConfig = {}) {
super(config, systemConfig);
this.setTemplate(`{{{read 'cards/standard/template' }}}`);
}
/**
* This returns an object that will be called `card`
* in the template. Put all mapping logic here.
*
* @param profile profile of the entity in the card
*/
dataForRender(profile) {
// Extract the data for the primary and secondary CTAs from the profile.
// Apply a sane default if not present in the profile.
const primaryCTAData = profile.c_primaryCTA || {};
const secondaryCTAData = profile.c_secondaryCTA || {};
return {
title: profile.name, // The header text of the card
url: profile.website || profile.landingPageUrl, // If the card title is a clickable link, set URL here
target: '_top', // If the title's URL should open in a new tab, etc.
// image: '', // The URL of the image to display on the card
// tagLabel: '', // The label of the displayed image
titleEventOptions: this.addDefaultEventOptions(),
// subtitle: '', // The sub-header text of the card
details: profile.description, // The text in the body of the card
// If the card's details are longer than a certain character count, you can truncate the
// text. A toggle will be supplied that can show or hide the truncated text.
showMoreDetails: {
showMoreLimit: 750, // Character count limit
showMoreText: 'Show more', // Label when toggle will show truncated text
showLessText: 'Show less' // Label when toggle will hide truncated text
},
// The primary CTA of the card
CTA1: {
label: primaryCTAData.label, // The CTA's label
iconName: 'chevron', // The icon to use for the CTA
url: primaryCTAData.url, // The URL a user will be directed to when clicking
target: '_top', // Where the new URL will be opened
eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
eventOptions: this.addDefaultEventOptions()
},
// The secondary CTA of the card
CTA2: {
label: secondaryCTAData.label,
iconName: 'chevron',
url: secondaryCTAData.url,
target: '_top',
eventType: 'CTA_CLICK',
eventOptions: this.addDefaultEventOptions()
}
};
}
}
ANSWERS.registerComponentType(StandardCardComponent);Don’t be alarmed! This is simply defining every element of the cards; you’ll only need to modify and tweak to get to the card you want. There are a number of helpful comments within the file as well to help you understand what item is controlling.
For example, for our standard card, here are the data mappings we see. You can ignore all the comments - some elements are left comments so you can easily add them in should you fork the card.:
return {
title: profile.name, // The header text of the card
url: profile.website || profile.landingPageUrl, // If the card title is a clickable link, set URL here
target: '_top', // If the title's URL should open in a new tab, etc.
titleEventOptions: this.addDefaultEventOptions(),
details: profile.description, // The text in the body of the card
showMoreDetails: {
showMoreLimit: 750, // Character count limit
showMoreText: 'Show more', // Label when toggle will show truncated text
showLessText: 'Show less' // Label when toggle will hide truncated text
},Here, we’ll see that the default Standard Card will map to:
- The name field for the Title
- The website (or landingPageUrl, if website is not populated) field for the Title URL
- The description field for the Details
As well as have:
- default event mappings for Title Card (
TITLE_CLICK) - ‘Show more’ appearing after the details section exceeds 750 characters, and ‘Show less’ after a user clicks to expand the details section.
To leverage these standard mappings, you don’t have to do anything besides name this card in your [vertical-name].json file as the cardType. However, if you want to alter this at all, that is when you’ll need to fork a card, which you’ll learn in the next unit.
Daily Quiz Streak: 0
Quiz Accuracy Streak: 0
Question 1 of 3
What are the two files you'll find in the Card folder? (Select all that apply)
Question 2 of 3
Where can you find the definition of built-in cards?
Question 3 of 3
What is the icon for CTAs on the Standard card?
Wahoo - you did it! 🙌
