Location standard card - formatting multiple hours fields

[Kara_Knight]

Hi everyone,

My client is looking to customize their location-standard card to match the image below. I am looking for help on a few items:

• Moving “hours” from the middle of the answers card to the far left column, to display below phone number

• Adding a line of text to the location card for only two location types (conditional) that says “Today’s Hours”

• Below “Today’s Hours” - Adding a custom formatter after “Lobby Hours:” to display hours from the “hours” field based on what day it is, ignoring the “open status” formatter!

  

[Sam_Torres]

Hi @Kara_Knight –

Here are some steps you could take to achieve this:

1. Add drive through hours to your card data mappings in component.js:

drivethruhours: profile.c_driveThruHours ? 'Drive-Thru: ' + Formatter.openStatus(profile, 'c_driveThruHours') : null,

2. Update your template.hbs file to ingest both sets of hours:

    {{#if (any card.hours card.drivethruhours)}}
    <div class="HitchhikerLocationStandard-hoursStatusText">Today's Hours</div>
    {{/if}}        
    {{#if card.hours}}
    <div class="HitchhikerLocationStandard-hoursText">
      {{{card.hours}}}
    </div>
    {{/if}}
    {{/if}}
    {{#if card.drivethruhours}}
    <div class="HitchhikerLocationStandard-driveThruHoursText">
      {{{card.drivethruhours}}}
    </div>
    {{/if}}
   

You can then play around with the styling and spacing on the card as needed! Hope this helps.

Sam