How to get numbers to show currency and price

Hi there

We have a CMS number field that is being populated with a price. But when we include the field in a CMS collection, the price is one solid number. Example: 47534532 instead of $47,534,532

How do we get the number field to display currency symbol and proper commas?


Here is my public share link: LINK
(how to access public share link)

hi @Aaron_LeBlanc you can use RegEx in custom function

function formatPriceNumber(priceNumberString) {
	var cleaned = priceNumberString.replace(/\D/g, "");
	var match = cleaned.match(/^(\d{2,3})(\d{3})(\d{3})$/);
	if (match) {
		return `$${match[1]},${match[2]},${match[3]}`;
	}
	return null;
}

Example:

Hope this will help to solve your request.

This looks awesome. But I will be honest, I am bit lost.

What is a custom function?

Where do install this?

We have other number fields in our CMS that are not Currency related numbers, like year. How do we control this by specific number fields?

Hey Stan, check out Intl.NumberFormat, it’s purpose-built for this.
I just tripped over a solid answer @webdev wrote on this also.

@Aaron_LeBlanc any time you’re wanting to do things Webflow does not have in-built support for, you will probably use script to create the behavior you want. It’s best to learn how to do this. For now, you’ll at least need to learn how to install it;

Stan’s code will format your numbers but you need to learn how to target it to the right elements, so that you’re formatting the right things. If you share a read-only link to your project we might be able to help you figure that out.

I hadn’t realized how limited the numeric formatting options are in CMS-bound numeric fields, so I’ve decided to add this to the WFU library as a custom attribute.

You can just add the script reference into your page’s </body> custom code area;

<script type="module" src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@3.21/src/nocode/webflow-format.js"></script>

And then on the element you’ve bound to your CMS number field, add a custom attribute;

wfu-format=usd

EDIT: That’s all you need to do, however note that since this is a script running, the formatting will it will only appear on your published site an not in the designer. [ Thanks, Aaron! ]

Here are the docs if you’d like to go deeper on the options;

3 Likes

hi @memetican I have updated codePen example according to your note but in general IMO there is no difference between these two only approach how to as returned value is a string anyway.

IMO recommending installing library for simple task like that is total overkill but if you are happy with that …

hi @Aaron_LeBlanc you will store reference to field you need in variable and apply function only to this element, you can check example again to get what this mean. As @memetican mentioned please go to WFU to learn how to work with custom code.

There is also Posting guide pinned on to of each section that you should read and in future follow these recommendation as they have its purpose. I have copy these for you if you have missed them. :wink:

When posting please:

  1. Required: Share your project’s Read-Only link AND live site’s Published link
  • The read-only link is a special url generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the webflow.io subdomain where you can view the live site with custom code running. It is important to share this link, as custom code does not run in the Designer.
  1. Upload as many screen shots/screen cast videos as possible to help others help you faster
  2. Add a description and/or post a link to a working example of what you’re trying to achieve
  3. Reply to users by tagging using the @ sign followed by their forum username like this: @Aaron_LeBlanc
1 Like

Hi there.

I just wanted to let you know that this worked for me and I am super happy.

I didnt understand why it wasnt working at first, then realized I need to see the site live.

Thank you so much for taking the time. Its people like you that make this nocode movement real.

Appreciate you. All the best.

1 Like

Thanks Aaron, so great to hear it helped.