Custom Formatter for Address field

Search
1

Hello!

I am trying create a custom formatter for a client to update the Address field and have not been able to find the right code in the theme files. I also wasn’t able to find specific information on address custom formatters in the card HH modules. Right now the address field in my card is formatted as

Address Line 1
Address Line 2
City, State, Zip Code
Country Code

I would need the address to read in a single line like such

Address Line 1, Address Line 2, City, State, Zip Code, Country Code

Any help is appreciated, thank you!

2

Hi Jade,

Thanks so much for your patience! You should be able to fork a location card and add a custom formatter for this single-line address format. The custom formatter for addresses includes some nested functions and gets a little tricky, so feel free to reach out with any follow-up questions!

Step 1: Update your static > js > formatters-custom.js file

First, you will need to import the relevant address components from your theme files. You can find these in address-fields.js and address-i18n.js.

Next, you will define the custom formatter for the address field used in your forked location card. I’ve called it addressSpecial here. This formatter is the same as the original address formatter, but now returns a special components__address__i18n__addressForCountry. Feel free to add/remove countries that should be accounted for in the logic.

components__address__i18n__addressForCountry in turn calls a special components__address__i18n, which removes the additional lines that were created in the original address formatter, presenting the single-line address!

Feel free to paste this into your static > js > formatters-custom.js file:

import { components__address__i18n__addressForCountry } from './address-i18n.js'
import { components__address__fields__postalCode } from './address-fields.js';
import { components__address__fields__city } from './address-fields.js';
import { components__address__fields__address2 } from './address-fields.js';
import { components__address__fields__country } from './address-fields.js';
import { components__address__fields__region } from './address-fields.js';
import { components__address__fields__address1 } from './address-fields.js';
import { components__address__fields__sublocality } from './address-fields.js';

export function addressSpecial(profile) {
 if (!profile.address) {
    return '';
  }
  return components__address__i18n__addressForCountrySpecial({
    profile: profile,
    derivedData: {address: {stateName: ''}},
    regionAbbr: true,
  });
}

export function components__address__i18n__addressForCountrySpecial(opt_data, opt_sb, opt_ijData) {
  var output = '';
  switch (opt_data.profile.address.countryCode) {
    case 'AU':
    case 'CA':
    case 'SZ':
    case 'US':
    case 'VI':
      output += components__address__i18n__Special(opt_data, opt_sb, opt_ijData);
      break;
        }
  return output;
};

 export function components__address__i18n__Special(opt_data, opt_sb, opt_ijData) {
  var output = '';
  switch (opt_data.locale) {
    default:
      if (((((((((((opt_data.profile.address.line1) || (opt_data.profile.address.line2))) ||(opt_data.profile.address.city))) || (opt_data.profile.address.region))) || (opt_data.profile.address.postalCode))) || (opt_data.profile.address.countryCode))) {
        output += '\x3Cdiv class=c-AddressRow\x3E';
        if (opt_data.profile.address.line1) {
          output += components__address__fields__address1(opt_data, opt_sb, opt_ijData);
        }
        if (opt_data.profile.address.line2) {
          output += ', ' + components__address__fields__address2(opt_data, opt_sb, opt_ijData);
        }
        if (opt_data.profile.address.city) {
          output += ' , ' + components__address__fields__city(opt_data, opt_sb, opt_ijData);
        }
        if (((opt_data.profile.address.region) || (opt_data.profile.address.postalCode))) {
          output += '\x3Cyxt-comma\x3E,\x3C/yxt-comma\x3E';
          output += ' ';
        }
        if (opt_data.profile.address.region) {
          output += components__address__fields__region(opt_data, opt_sb, opt_ijData);
        }
        if (opt_data.profile.address.postalCode) {
          output += ' ';
        }
        if (opt_data.profile.address.postalCode) {
          output += components__address__fields__postalCode(opt_data, opt_sb, opt_ijData);
        }
        output += ' ';
        output += '\x3C/div\x3E';
      
      if (opt_data.profile.address.countryCode) {
        output += '\x3Cdiv class=c-AddressRow\x3E';
        if (opt_data.profile.address.countryCode) {
          output += ' , ' + components__address__fields__country(opt_data, opt_sb, opt_ijData);
        }
        output += '\x3C/div\x3E';
      }
      }
      break;
  }
  return output;
};

Step 2: Update your location override component.js file

Update your forked location override card to use your new addressSpecial formatter:

address: Formatter.addressSpecial(profile)

Step 3: Adjust your location override template.hbs file

Adjust your styling and spacing on the card as needed!

Hope this is helpful!

Thanks,
Jamie