loading

Standard Data Mappings| 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 Answers 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.

Cards in Theme

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.

unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 3

    What are the two files you'll find in the Card folder? (Select all that apply)

    Error Success Question 2 of 3

    Where can you find the definition of built-in cards?

    Error Success Question 3 of 3

    What is the icon for CTAs on the Standard card?

    A Hitchhiker in the making! 🔥

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect
Splash Loading