Price field appearing incorrectly

Search Best Practices - Search Front-End
2

Hey Hannah,

You can see what the formatter looks like by going to themes > answers-hitchhiker-theme > static > js > formatters-internal.js file. Here you’ll see the price formatter uses the parseInt() function which returns an integer which is why it’s not reading the decimal portion of the value.

We’ll want to parse the value as a float number instead. To do this, copy the price formatter and the _getDocumentLocale() function it uses to the static > js > formatters-custom.js file outside of the theme (this is where you can add custom formatters). Change the parseInt function to parseFloat. Your code in the formatters-custom.js file will look like:

export function priceFloat(fieldValue = {}, locale) {
  const localeForFormatting = locale || _getDocumentLocale() || 'en';
  const price = fieldValue.value;
  const currencyCode = fieldValue.currencyCode && fieldValue.currencyCode.split('-')[0];
  if (!price || isNaN(price) || !currencyCode) {
    console.warn(`No price or currency code in the price fieldValue object: ${fieldValue}`);
    return fieldValue.value;
  }
  return price.toLocaleString(localeForFormatting, { style: 'currency', currency: currencyCode });
}

export function _getDocumentLocale() {
  return document.documentElement.lang.replace('_', '-');
}

Finally, reference the updated function on the relevant card like so:

subtitle: Formatter.priceFloat(profile.price)+" per month",

1 Like