Making Address & Phone Number Clickable on Both Mobile & Desktop

Search Best Practices - Search Front-End
1

Hello,

I am building out an Answers experience for a healthcare client which will primarily act as a provider & facility lookup. It is very important to the client that both the address and phone number on the result cards are clickable on both desktop and mobile.

Address - Clicking should result in the same behavior as clicking a “Get Directions” CTA.
Phone Number - Clicking should result in the same behavior as clicking a “Call” CTA.

Any insight into how I can configure this would be greatly appreciated!

Best,
DJ

2

Hey @DJ_Corbett – following up with a solution that I think should get you moving in the right direction.

Phone Clickable on Desktop and Mobile

To make Phone clickable on Desktop and Mobile, you can override your card’s template.hbs file. Today in the Theme, we have different styling and actions on desktop and mobile; so when we override the template, let’s remove the conditional configuration and use a single div for the phone number for both desktop and mobile (near line 132):

{{#*inline 'phone'}}
{{#if card.phone}}
<div class="HitchhikerProfessionalLocation-phone">
  <a class="HitchhikerProfessionalLocation-desktopMobile"
    href="tel:{{card.phone}}"
    data-eventtype="TAP_TO_CALL"
    data-eventoptions='{{json card.phoneEventOptions}}'
    target="_top">
    {{card.phone}}
  </a>
</div>
{{/if}}
{{/inline}}

You should then target this new class and style it as needed in your answers.scss file.

Address Clickable on Desktop and Mobile

You will need to add a function to your card’s component.js file which you can then call in your template.hbs file.

Within your component.js dataForRender, add the below function (repurposed from our standard Get Directions formatter):

  const addr = profile['address'];
  if (!addr) {
    return '';
  }
  const line2 = addr.line2 ? ` ${addr.line2},` : ``;
  const region = addr.region ? ` ${addr.region}` : ``;
  const rawQuery = `${addr.line1},${line2} ${addr.city},${region} ${addr.postalCode} ${addr.countryCode}`;
  const query = encodeURIComponent(rawQuery);
  let directionsUrl = `https://www.google.com/maps/search/?api=1&query=${query}&output=classic`;

  if (profile.googlePlaceId) {
    directionsUrl += `&query_place_id=${profile.googlePlaceId}`;
}

And within return{} mappings below the function, make sure you add in getDirectionsUrl so that we can leverage it in the template.hbs file:

directionsUrl,

Lastly, in your template.hbs file, we can set up the href and reference card.directionsUrl near line 72:

{{#*inline 'address'}}
{{#if card.address}}
<div class="HitchhikerProfessionalLocation-address">
  <a class="HitchhikerProfessionalLocation-addressClick"
    href={{card.directionsUrl}}
    data-eventtype="DRIVING_DIRECTIONS"
    data-eventoptions='{{json card.EventOptions}}'
    target="_blank">
    {{{card.address}}}
  </a>
</div>
{{/if}}
{{/inline}}

Similar to the clickable phone number, you’ll want to style a hover state in answers.scss for the address to make it clear to the user that it’s clickable.

Hope this helps!

Sam

3 Likes
3

@Sam_Torres This response is unbelievably helpful, thank you so much for taking the time to explain everything in detail. I was able to use your instruction to make this work for both providers and facilities and added some links styling as well!

4

Following up on this solution with a tweak you will need to make to the above code for driving direction click analytics to fire properly for an address click.

In addition to adding the directionsUrl to the return{} mappings of the component file as described above, you will also add a property for the directions click event options: directionsEventOptions: this.addDefaultEventOptions().

Once this is added, you will need to tweak the data-eventoptions property in the handlebars file, which is described above, to call this new value: data-eventoptions='{{json card.directionsEventOptions}}'.

Now the analytics event for directions should fire properly upon an address click and show up correctly in the platform!

Best,
DJ

5

Hey there!

This is exactly what I am trying to do. I followed your directions and unfortunately haven’t had any luck. Any guidance would be greatly appreciated!

Screenshot 2022-03-08 113600

Best,
Ilana

6

Hey Ilana!

Looks like you just need to change that second starting <div> tag, the one with the ...--desktopMobile class to an <a> tag!

Best,
DJ

7

That did it! Thank you so much :slight_smile: