Distance on Location Card not appearing

[Sonia_Reardon]

Hello,

My client is having an issue where the distance for some of their locations is not appearing on the Locations card even though the users computer is set to share location. For some locations it works, but for some, the distance only appears once the location facet has been applied.

In a conversation with someone from Tech Ops, they shared this:

d_distanceFromFilter only returns when a location filter is applied, which is why you’re not seeing it displayed on all results.

If you’d like to display the distance from the user’s derived location, you can update that to just distance: Formatter.toMiles(profile) (the formatter falls back to use the d_distance field). Furthermore, you can do some conditional logic to check if a d_distanceFromFilter exists, and if so, use it, otherwise fallback to d_distance .

I tried updating the distance field to just:

distance: Formatter.toMiles(profile)

and also tried a null check:

distance: d_distanceFromFilter ? d_distanceFromFilter : d_distance,

However, neither worked. I was directed to post in the Community if there were any errors, so would appreciate any insight in to what might be going wrong here.

Thank you!

[roser]

Hi Sonia,

You’ll need to fork the formatter and check for the variable there. For details on how to add a custom formatter, see this post, Custom Formatters in Answers - #6 by Sam_Torres - Search - Hitchhikers

You’d add the following to your formatters-custom.js:

export function toMiles(profile, key = 'd_distance', displayUnits = 'mi', locale) {
  var computedDistance = profile['d_distanceFromFilter']  ??  profile['d_distance']
  if (!computedDistance) {
    return '';
  }

  locale = _getLocaleWithDashes(locale) || _getDocumentLocale();
  const distanceInMiles = computedDistance / 1609.344; // Convert meters to miles
  return new Intl.NumberFormat(locale,
    { style: 'decimal', maximumFractionDigits: 1, minimumFractionDigits: 1 })
    .format(distanceInMiles) + ' ' + displayUnits;
}

and in your card you’d reference distance: Formatter.toMiles(profile) (the theme will pick your custom, overridden formatter over the built-in one).

Let us know how this works for you!

Rose

[Sonia_Reardon]

Hi Rose,

Thank you! This is so helpful. Only issue is the account does not have a formatters-custom.js file, only formatters.js and formatters-internal.js

When I try adding the above code to either of these files it does not work. Do I need to do a theme upgrade to have formatters-custom.js available?

Thank you!
Sunny

[roser]

If the formatters-internal is already forked, you can go ahead and modify that file. Find the toMiles function in that file, and replace it with the above snippet, and that should do the trick!

[Sonia_Reardon]

@roser

Formatter.toMiles(profile)

Hi Rose,

It looks like I’m getting an error on the ?? and the if statement below from copying in the code above (see the previous toMiles function commented out below).

Any thoughts on what might be going wrong here?

Thanks so much!

[roser]

Hi Sonia,

This should work!

export function toMiles(profile, key = 'd_distance', displayUnits = 'mi') {

  var computedDistance = 'd_distance';
  if (profile['d_distanceFromFilter']) {
    computedDistance =  'd_distanceFromFilter';
  }
  const distanceInMiles = profile[computedDistance] / 1609.344; // Convert meters to miles
  return distanceInMiles.toFixed(1) + ' ' + displayUnits;
}

Thanks,
Rose