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;
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. 
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.
Thanks Aaron, so great to hear it helped.
whut is this craziness. sort of wild that the UX focused brand, that did create UI for every date format you could dream of, somehow neglected currency?
lol okay now to decipher this
no brain for this right now so two plain text boxes next to each other, one with just ‘$’ it is!
this AI rising era makes every tech seem so beyond unintuitive. things are gonna be so wildly different soon me thinks