How to add 3 digit dot separators?

[gtc (Gerard)]

Hi there,
Is there a way to add 3 digit dots (or commas) separators in CMS numbers fields?
Can’t understand why there isn’t a native solution for this.

Regards

[Incognito_Agency (Incognito Dev)]

Hey @gtc ,

In settings for your Number field in CMS You can find Decimal checkbox, you can check that and you’ll be able to add decimal numbers if that’s what you are referring to.

Let me know if I misunderstood you or if I can help you with anything else, cheers!

[gtc (Gerard)]

Hi @Incognito_Agency
I don’t want to add decimal numbers. I need my numbers to be something like this 125.000 (in Europe we use dots instead of commas).

[Lucas_Weinmann]

Having the same problem here. Would love to have that natively implemented.
Since I just have price as a field of a CMS - not running an ecommerce - I’ve used a simple plain text field, instead of a number field.

[Stan (justAnotherDeveloper)]

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

numberWithCommas(123456)

[YusufA (Yusuf Aydin)]

How to use your example?

[Stan (justAnotherDeveloper)]

Hi @YusufA what do you mean?

[YusufA (Yusuf Aydin)]

How can I implement your solution into my Webflow Page? I would like to show the pricing of my CMS items with the dot seperators

[Stan (justAnotherDeveloper)]

hi @YusufA here is a simple example
code is in page setting.

LIVE PREVIEW

EDIT: I’ve just update code, now it is much simpler.

<script>
const sourceNumbers = [...document.querySelectorAll(".original")]
const destination = [...document.querySelectorAll(".formated")]

destination.forEach((destElem, index) => {
  const srcElem = sourceNumbers[index].innerHTML;
  return destElem.innerHTML = numberWithCommas(srcElem);
});

function numberWithCommas(x) {
  return x.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
</script>

[YusufA (Yusuf Aydin)]

Hi Stan, perfect, thank you! I see this question asked a lot here and you are the first one to make an easy to follow example for beginners.

Is there a way to cut off the decimals as well? I mean everything that comes after the comma.

[Stan (justAnotherDeveloper)]

Hi @YusufA again I do not understand what do you mean. We are here talking about number field formatting how to add a dot after each 3 numbers and not currency formatting. Just write shorter number.

[YusufA (Yusuf Aydin)]

Hi @Stan , i have the issue that my numbers get automatically imported from somewhere else in this format: xxxxxx,xx

Currently using your script it shows the numbers like this: xxx.xxx,xx but I want it to look like this: xxx.xxx

[Stan (justAnotherDeveloper)]

ok @YusufA If your data come to you for some reason as number you should first format your number to a string. After you remove any commas

const data = "1000,00"
const wholeNum = data.replace(",", "")

Then you can do whatever you need.

EDIT: as I do not know what format you prefer here is screenshot of two ways how to

or

Hope that helps