Creating a clickable card

Search Best Practices - Search Front-End
1

I’m looking to make the cards act like a button so that clicking any part of the card will direct you to the URL for the relevant page.

728×850 548 KB

2

In order to accomplish this, I need to do a few things in the frontend:

  1. Add a custom card, forked off of the existing product-prominentimage card
  2. Update the component.js to pass through all of the fields used on the card
  3. Update the custom card’s template.hbs to behave as a link
  4. Optional - add CSS styling so that it feels like a single button

Step 1 was just clicking Add Card under Tools > Jambo Commands and selecting the product-prominentimage. I named mine “story-grid”.

For Step 2, I needed to make a couple edits in the custom card’s component.js to make sure that I was pulling the right information from my Knowledge Graph onto the card. I edited the url to “profile.website” since I was pulling the URLs from the website field and commented out the description as I only wanted the title to be visible on the card.

return {

title: profile.name, // The header text of the card

url: profile.website, // 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(),

subtitle: profile.c_price ? `$${profile.c_price}` : '', // The sub-header text of the card

image: Formatter.image(profile.c_photo).url, // The URL of the image to display on the card

altText: Formatter.image(profile.c_photo).alternateText, // The alternate text for the image

// details: profile.description, // The text in the body of the card

Step 3 is the important part as this is where I actually changed the format of the card to behave as a single link. In the custom card’s template.hbs, I replaced lines 1-11 with the below code. This new code checks if there’s a URL and if so, creates a new class HitchhikerProductProminentImage-cardLink, which will hold all of the other content for the card and act as a link using the card’s URL that was defined in the component.json. We’re also passing data-eventtype and data-eventoptions so that a TITLE_CLICK event fires when a user clicks on the link.

<div class="HitchhikerProductProminentImage {{cardName}}">
  {{#if card.url}}
     <a class="HitchhikerProductProminentImage-cardLink"
          href="{{card.url}}"
          target={{#if card.target}}"{{card.target}}"{{else}}"_top"{{/if}}
          data-eventtype="TITLE_CLICK"
          data-eventoptions='{{json card.titleEventOptions}}'>
  {{/if}}
  {{> image }}
  <div class="HitchhikerProductProminentImage-body">
    {{> title }}
    {{> subtitle }}
    <div class="HitchhikerProductProminentImage-contentWrapper">
         {{> details }}
         {{> ctas }}
     </div>
   </div>
   {{#if card.url}}
     </a>
  {{/if}}
</div>

Finally for Step 4 I added some CSS to answers.scss so that the cards matched the website’s color scheme and looks like a single button when you hover over it.

.HitchhikerProductProminentImage:hover {

background-color: #9F2d32;

}

.HitchhikerProductProminentImage:hover .HitchhikerProductProminentImage-title {

color: white;

}

.HitchhikerProductProminentImage:hover .HitchhikerProductProminentImage-imgWrapper {

opacity: 0.5;

}

.HitchhikerProductProminentImage-title {

color: #9F2d32;

text-decoration: bold;

}

.HitchhikerProductProminentImage-imgWrapper {

height: 200px;

background-size: cover;

}

Here’s the final product with me hovering over 4 Not-So-Secret Secrets:

811×724 418 KB

5 Likes
3

Hey Carl,

This is awesome!! I love the combination of the clickable card with our grid layouts!

One word of advice for those using this - you can’t have links nested within other links, so make sure to remove your CTAs and the title link from the card if you’re using this approach.