Custom Result Card Code Examples | Yext Hitchhikers Platform

Box Shadow Around Card on Hover

.[[card name]] {
    transition: box-shadow .3s;

    &:hover {
      box-shadow: 0 0 11px rgba(33,33,33,.2); 
    }
  }

Box Shadow on Hover Example

Universal Search Results with Only Top and Bottom Borders

.HitchhikerResultsStandard-title {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid #c5bbb1;
}

.HitchhikerResultsStandard-titleLabel {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
}

.HitchhikerResultsStandard-Card {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid #c5bbb1;
  padding-bottom: 30px;
  padding-top: 7px;
}

.HitchhikerResultsStandard-viewMore {
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-top: none;
}

.yxt-Card {
  border-left:none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid #c5bbb1;
}

Search Results with Only Top and Bottom Borders Example

Prominent Image Unification

The object-fit properties help define the behavior of the image if it isn’t inherently the fixed dimensions.

.HitchhikerProductProminentImage-imgWrapper {
    justify-content: center;
    padding: .5rem;
}
.HitchhikerProductProminentImage-img {
    width: auto;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

This will standardize your images to all have a height of 200px, with a .5rem border around your images.

Add Circular Headshots

The best way to accomplish this is to do so via the object-fit properties. Learn more about this property here .

The below CSS would make the images circular, focusing on the center of the image, with a standard size.

.HitchhikerProductProminentImage-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    padding: 1rem;
}

If you would like to differentiate certain properties for the Desktop and Mobile experiences you can use media queries :

.HitchhikerProductProminentImage-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    padding: 1rem;

    @media only screen and (max-width: 768px) {
      border-radius: 0px;
      padding: 0px;
    }
}

Adding Email to Cards

In order to do this the right way, we’ll need to do three things:

1. Update the custom card’s component.js to pass through the Email field, as well as the details needed to successfully fire an Analytics event.

email: profile.emails ? profile.emails[0] : null,
emailEventOptions: this.addDefaultEventOptions(),

The email attribute passes in the first email address of the Emails field (if populated), otherwise returns null. Modify this to align with the field that stores your email addresses.

The emailEventOptions attribute just passes the standard data (entityId, universal vs. vertical search, etc) that allows us to fire an Analytics event.

2. Update the custom card’s template.hbs to add a section for Email that correctly formats the link.

First, we’ll create an {{>email}} partial. Add the below within your template.hbs file, preferably below the {{#*inline 'phone'}} partial.

{{#*inline 'email'}}
{{#if card.email}}
<div class="HitchhikerLocationStandard-email">
  <a href="mailto:{{card.email}}"
    data-eventtype="EMAIL"
    data-eventoptions='{{json card.emailEventOptions}}'
    target="_blank">
    {{card.email}}
  </a>
</div>
{{/if}}
{{/inline}}

Here, we’ve added a new class HitchhikerLocationStandard-email which allows us to style this email in the future. We’re then adding a link - to create an email link, simply add mailto: in front of the email address. We’re also passing data-eventtype and data-eventoptions so that an EMAIL event fires when a user clicks on the link. Lastly, the text of the link will be the email itself, enclosed within the <a> tag.

Now that we’ve defined the partial, we need to reference it so it’s placed on the card. If you’re forking from a location-standard or professional-standard card, you can navigate to the contactInfo partial in your file and add the email partial underneath the address & phone.

{{#* inline "contactInfo"}}
<div class="HitchhikerLocationStandard-contactInfo">
  {{#if (any card.phone card.address card.email)}}
  <div class="HitchhikerLocationStandard-core">
    {{> address }}
    {{> phone }}
    {{> email }}
  </div>
  {{/if}}

You’ll see that we both added the card.email in the #if statement, as well as added the partial below the address and phone partials.

3. Optional - add CSS to update the link styling

.HitchhikerLocationStandard-email {
      color: var(--yxt-color-brand-primary);
      margin-top: .5rem;

      a {
        text-decoration: underline;

        &:hover {
          text-decoration: none;
        }
      }       
    }

Display a List without Bullets

You will utilize list-style-type to disply a list on cards and exclude the bullet points.

.HitchhikerMenuItemStandard-listItems {
list-style-type: NONE;
}

Add a Conditional CTA Based on Boolean

You can easily do this by adding a boolean to your component.js file, and modifying the handlebars template to only show the third CTA if that boolean evaluates to true.

1. Update component.js The first step is to pass the information about whether a provider is accepting patients. Add an attribute in your component.js file to store whether or not a provider is accepting new patients. If you use the profile field, when this is marked as ‘Yes’, the boolean will evaluate to true; if it’s marked as false or unpopulated, it will evaluate to false.

acceptingNewPatients: profile.acceptingNewPatients,

You’ll also need to provide the data mapping for the third CTA.

CTA3: { // The tertiary call to action for the card
        label: 'Book Appointment',
        iconName: 'calendar',
        url: profile.c_primaryCTA.link,
        target: '_top',
        eventType: 'BOOK_APPOINTMENT',
        eventOptions: this.addDefaultEventOptions(),
        // ariaLabel: '',
      }

2. Update template.hbs The next step is to use this boolean to only show the tertiary CTA when acceptingNewPatients = true.

We can do this using an if statement in handlebars. We’ll check if card.acceptingNewPatients evaluates to true; if so, we’ll add the tertiary CTA. You can see the modifications to the CTA partial 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">
  {{> CTA card.CTA1 ctaName="primaryCTA" }}
  {{> CTA card.CTA2 ctaName="secondaryCTA" }}
  {{#if card.acceptingNewPatients}}
   {{> CTA card.CTA3 ctaname="tertiaryCTA"}}
  {{/if}}
</div>
{{/if}}
{{/inline}}

This will hide the CTA if acceptingNewPatients is not populated or false, and show it if it’s true.

Vertical Centering of CTAs

With the default Handlebars template, the CTAs container will align with the details container within a card. If you’d like to change the alignment, you’ll need to modify the card template slightly.

If you want to shift the CTAs up to align them vertically within the card, rather than align them with the details container, you can move the title and subtitle into the ‘info’ div.

1. Update template.hbs

<div class="HitchhikerProfessionalStandard {{cardName}}">
  {{> image }}
  <div class="HitchhikerProfessionalStandard-body">
    <div class="HitchhikerProfessionalStandard-contentWrapper">
      <div class="HitchhikerProfessionalStandard-info">
        {{> title }}
        {{> subtitle }}
        {{> details }}
        {{> list }}
        {{> phone }}
      </div>
      {{> ctas }}
    </div>
  </div>
</div>

2. Add Styling

You can ensure the contentWrapper div extends the whole height of the card, and use justify-content and align-self to align the CTAs to the middle of the card.

 .HitchhikerProfessionalStandard-contentWrapper {
    height: 100%;
  }

  .HitchhikerProfessionalStandard-ctasWrapper {
    justify-content: center;
    align-self: center;
  }

Fix CTAs to Bottom of Card

An easy way to make sure the CTAs are fixed to the bottom of the card is to use FlexBox to our advantage.

Assuming you’re using the product-prominentImage card (or a forked version of it), add the following css:

.HitchhikerProductProminentImage {
  &-body {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  &-contentWrapper {
    height: 100%;
    justify-content: space-between;
  }
}

This accomplishes the following:

Specifies the .HitchhikerProductProminentImage-body class to use flex and take up the full height of the card available after the image
Allows the .HitchhikerProductProminentImage-contentWrapper class to take up the full height of the container, and specifies the spacing between the description & the CTAs to be space-between, forcing the CTAs to the end of the card.

If you don’t have a description, the following CSS may help you as it will set the top margin to fix the CTAs container to the bottom of the card.

.HitchhikerProductProminentImage-ctasWrapper {
    margin-top: auto;
}

Back

< Custom Results Page Code Examples

Custom CTA Code Examples >

Feedback

<% elem.innerText %>