Temporarily Closed / Drive-Up only locations due to COVID-19

Search Best Practices - Search Front-End
1

Hi All,

As you know, many businesses are temporarily closed due to COVID-19. I utilized the Hours (Temporarily Closed) field in the Knowledge Graph to identify the affected locations. This has flowed through to our Answers experience and marked the affected locations as Closed on their respective results card. Is it possible to alter the language of the subtitle in the card to say “Temporarily Closed due to COVID-19” for the affected locations?

Similarly, we have a number of locations that are Drive-Up only. Is it possible to add “Drive-up Only” to the subtitle of the result cards for the relevant locations? Given that these locations are still open, I would love to populate the text “Drive-up Only” in addition to the drive up hours for each of the relevant locations.

Thank you!
Austin

1 Like
2

Hey @Austin_DaCunha - I had had this come up for a few of my implementations as well. One solution that we’ve seen work really well is the following:

– Use a custom, single-line text field as the vertical subtitle in your answers.js file
– Target the subtitle using CSS with a color that stands out

This would produce the following result:

image
image1382×382 38.8 KB

Is this a solution that would work for you? If so, I can provide more implementation details.

3

Hey @Sam_Torres,

Thanks for the response! This looks like a great solution, I will follow up with any questions.

Thank you,
Austin

1 Like
4

Hi Sam!

I have a quick question here - I’m also interested in doing this for a client but I’d also want to keep the hours subtitle as well. My code right now already has a subtitle return for the open status, but I’m not too sure how to add an extra line of code to show the custom field.

Thank you!!
Susie

5

Hi @Susie_Xu - great! I am happy to hear more clients are leveraging this feature. The hours text will show by default if you are using the hours formatter within dataMappings

You can add the custom subtitle text above it by first creating the custom, single line text field within your Knowledge Graph. Then you can simply add subtitle: (profile) => profile.c_customFieldName, to the vertical JS dataMappings. The full vertical dataMappings could look something like this for locations:

  dataMappings: {
    subtitle: (profile) => profile.c_customFieldName,
    ctas: [
      ctaTypes.PHONE,
      ctaTypes.DIRECTIONS,
    ],
    details: (profile) => {
      const phoneLink = Formatter.phoneLink(profile);
      return `
        <div class="yxt-Result-hours Hours">
          ${Formatter.openStatus(profile)}
        </div>
        <div class="yxt-Result-address">
          ${Formatter.address(profile)}
        </div>  
        <div class="yxt-Result-phone">
          <a href="${phoneLink}">${customFormatter.phoneDisplaySpecial(profile)}</a>
        </div>
      `;
    }
  }

You can then target the subtitle in answers.scss and apply some styling like this:

.yxt-Result-subtitle
{
  font-weight: bold;
  font-style: italic;
}
1 Like
6

Hi @Sam_Torres

Thanks for the additional information here, super helpful!

Is it possible to add the subtitle styling to a particular vertical, rather than all verticals in the experience? For example, I only want locations to have their subtitles bolded. I included the code I tried using below for reference:

.yxt-Results-subtitle--Locations {
font-weight: bold;
font-style: italic;
}

Thank you,
Austin

7

hey @Austin_DaCunha - yup, you’re very close! Try the below; this should allow you to target the locations vertical subtitle specifically:

.yxt-Result--locations 
  .yxt-Result-subtitle
{
  font-weight: bold;
  font-style: italic;
}