Price field appearing incorrectly

[Hannah_Mussi]

I’m pulling the profile.price field onto my product-prominentimage cards using the price formatter that was already in the component.js file, and it seems to be the correct line since it’s registering the “per month” text following it, but for some reason it’s showing .00 instead of the .99 in the platform. Any reason why this is happening?

[Kristy_Huang]

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",

[roser]

Hi Hannah,

An additional update that this has been corrected in priceFloat formatter in theme version 1.20. Thanks for flagging!

Rose