Get Directions Formatter Update

Search Best Practices - Search Front-End
1

Affects Theme v1.15.0+

In theme 1.15 we updated our get direction formatter (used in our Get Directions CTAs) to use the same url we use in our pages product :handshake: With this update, we encountered an edge case for users that have the Google Maps app on mobile; the device redirect to the Google Maps app handles the link differently than it would in a browser.

Instead of locating the Google Place ID in the Google Maps app, it would show a No Results screen with the search place_id:<Google Place ID>.

We’re working on a solution that we’ll include with our next theme release. In the short term, to address this issue:
(1) Override themes/answers-hitchhiker-theme/static/js/formatters.js
(2) Comment out the default getDirectionsUrl (around line 7)
(3) Override with a new function that uses a different endpoint for place id below the import statements

Your overrided formatters class might look like this:

import {
  address,
  phoneLink,
  phoneDisplay,
  nationalizedPhoneDisplay,
  emailLink,
  //getDirectionsUrl,
  toKilometers,
  toMiles,
  isTodayHoliday,
  bigDate,
  betterTime,
  dateRange,
  snakeToTitle,
  prettyPrintObject,
  joinList,
  image,
  truncate,
  openStatus,
  generateCTAFieldTypeLink
} from './formatters-internal.js';

function getDirectionsUrl(profile, key = 'address') {
  const addr = profile[key];
  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 url = `https://www.google.com/maps/search/?api=1&query=${query}&output=classic`;

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

  return url;
}

/**
 * Contains some of the commonly used formatters for parsing pieces of profile
 * information. To remove a formatter from the bundle, comment the desired
 * line below.
 */
const Formatters = {
  address,
  phoneLink,
  phoneDisplay,
  nationalizedPhoneDisplay,
  emailLink,
  getDirectionsUrl,
  toKilometers,
  toMiles,
  isTodayHoliday,
  bigDate,
  betterTime,
  dateRange,
  snakeToTitle,
  prettyPrintObject,
  joinList,
  image,
  truncate,
  openStatus,
  generateCTAFieldTypeLink
};

export { Formatters as default };

Feel free to post any questions here!
Christian

1 Like
2

Update: This bug is fixed in Theme versions 1.17 and newer