Adding Custom HTML to Result Cards

Search Best Practices - Search Front-End
1

Hi Team,

I’ve been reviewing the design of my Answers experience with my Development team and am wondering if/how we can make adjustments to the layout of a card. As you can see in the image below, we’d like to add the terms ‘Address’ and ‘Hours’ above their respective elements on the Location results card.

image
image854×188 8.55 KB

Based on my knowledge of going through the training modules, I believe I could fork the standard location card to override it’s format. However, I’m not certain that we can create additional HTML elements on the card. Is the design I’ve outlined above possible?

Thank you,
Austin

2

Hi Austin,

You can absolutely do this! You’re on the right track, you would fork the location-standard card and add these subtitles above where the address and hours are added. Example below - I think this will achieve what you’re looking for:

{{#* inline "contactInfo"}}
<div class="HitchhikerLocationStandard-contactInfo">
  {{#if (any card.phone card.address)}}
  <div class="HitchhikerLocationStandard-core">
    <span class="HitchhikerLocationStandard-addressLabel">Address</span>
    {{> address}}
    {{> phone}}
  </div>
  {{/if}}
  {{#if (any card.hours card.services)}}
  <div class="HitchhikerLocationStandard-infoCol">
    {{#if card.hours}}
    <div class="HitchhikerLocationStandard-hoursText">
    <span class="HitchhikerLocationStandard-hoursLabel">Hours</span></br>
      {{{card.hours}}}
    </div>
    {{/if}}
    {{#if card.services}}
    <div class="HitchhikerLocationStandard-services">
      <span class="HitchhikerLocationStandard-servicesLabel">
        Services:
      </span>
      <span>
        {{#each card.services~}}{{this}}{{#unless @last}}, {{/unless}}{{~/each}}
      </span>
    </div>
    {{/if}}
  </div>
  {{/if}}
</div>
{{/inline}}

Let me know if this helps!

3

Hey Amani,

This worked great, thank you so much!