Good day Coders,
I was able to calculate the total price in the shopping cart area, it calculates properly except the comma i added as separator does not seem to work. I also wanted to put a peso currency on the Price but I can’t figure it out. The one you’re seeing is just a text fixed there written as ₱. can you please check my code?
I highly appreciate a lot if you somebody is kind enough to help.
Hi Analiza
Try using ‘toLocalString()’ - this should help you with the commas.
Best of luck!
Tiaan
I’m having trouble getting this to work. Would you mind showing me some example code of how this is supposed to work to get 40000 to look like $40,000?
Something like this if value came from input1 & input1 input type is set to number. Otherwise you’d need to parseFloat the value to convert it to a number.
let price = "$" + $w("#input1").value.toLocalString()
Hope this helps!
Tiaan
Thanks, Tiaan. That worked!! Now, to have it show up inside a repeater… The value is coming from a database as a number. Would this still work or would I have to create some sort of foreach thing?
@charles27607 you would need to create foreach() function and run that when the dataset has finished loading
@tiaan … I’m trying to use the foreach function, but I don’t think I’m doing it correctly. Would you mind looking at my code and sending something that would work?
$w.onReady( function () {
$w(“#dynamicDataset”).onReady(() => {
populateCalculatedFields();
} );
$w(“#dynamicDataset”).onCurrentIndexChanged( (index) => {
populateCalculatedFields();
} );
} );
function populateCalculatedFields() {
const currentItem = $w(“#dynamicDataset”).getCurrentItem();
$w(“#repeater1”).forEachItem( ($item, itemData, index) => {
console.log($w(“#priceText”).text);
var number = Number($w(“#priceText”).text);
console.log(number.toLocaleString());
$w(“#priceText”).text = “$” + number.toLocaleString();
});
}
in your forEach function, try replacing $w if front of the elements with $item - that should get you going in the right direction 
@tiaan , I was able to get the following code working… but it’s only on the first page of the repeater. Any idea how to get the prices formatted for the other pagination?
$w.onReady( function () {
$w(“#dynamicDataset”).onReady(() => {
populateCalculatedFields();
} );
$w(“#dynamicDataset”).onCurrentIndexChanged( (index) => {
populateCalculatedFields();
} );
} );
function populateCalculatedFields() {
$w(“#dynamicDataset”).onReady(() => {
$w(‘#repeater1’).forEachItem( ($item, itemData, index) => {
const numberWithCommas = (x) => {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “,”);
}
$item(‘#priceText’).text = “$” + numberWithCommas(parseInt($item(‘#priceText’).text, 10));
} );
});
}
I haven’t had the need to try, but if I had to take a wild guess I’d probably call these functions again whenever the pagination has been clicked. I suspect it might need to re-render the new data.
Keep us posted!
Tiaan
@tiaan Thanks, Tiaan… here’s what I did to get it to work. It’s not perfect, but it works (kinda)…
$w.onReady( function () {
$w(“#dynamicDataset”).onReady(() => {
console.log(‘ready’)
populateFormattedPrice();
} );
$w(“#dynamicDataset”).onCurrentIndexChanged( (index) => {
console.log(‘index has changed’)
populateNewFormattedPrice();
} );
} );
function populateFormattedPrice() {
$w(“#dynamicDataset”).onReady(() => {
$w(‘#repeater1’).onItemReady( ($item, itemData, index) => {
const numberWithCommas = (x) => {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “,”);
}
$item(‘#priceText’).text = “$” + numberWithCommas(parseInt($item(‘#priceText’).text, 10));
} );
});
}
function populateNewFormattedPrice() {
$w(“#dynamicDataset”).onReady(() => {
$w(‘#repeater1’).forEachItem( ($newItem, itemData, index) => {
console.log(‘new item ready’)
const newNumberWithCommas = (x) => {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “,”);
}
$newItem(‘#priceText’).text = “$” + newNumberWithCommas(parseInt($newItem(‘#priceText’).text, 10));
});
});
}
Hello guys, I’m new to coding. Especially Velo, but I’ve tried my best to understand it. I’ve tried all the tutorials here at the forum but I always get an error like “Property ‘value’ does not exist on text type.” In my Content Manager, I already changed the property type from text into number but still got an error. What have I done wrong? Please help.
For anyone still having trouble using .toLocaleString() to display commas to a Number Field from a dataset in a repeater, here’s the code that I used which works perfectly for me:
$w . onReady ( function () {
$w ( “#yourDataset” ). onReady (() => {
$w ( “#yourRepeater” ). forEachItem (( $item , itemData , index ) => {
let number = Number ( $item ( “#repeaterTextBox” ). text ). toLocaleString ();
$item ( “#repeaterTextBoxID” ). text = number ;
})
})
});
Plug in the ID’s for your page’s elements and this should display the number values in “#repeaterTextBox” with commas in them in preview/Live after the page loads.
If you also have dynamic pages for each of your dataset/repeater items, you can add this code in those pages as well:
$w . onReady ( function () {
$w ( “#yourDataset” ). onReady (() => {
let number = Number ( $w ( “#textBox” ). text ). toLocaleString ();
$w ( “#textBox” ). text = number ;
})
});
Note: Remember that the element ID’s may be be different in this page so make sure you change them accordingly if that’s the case
Searched for ages finally fixed mine to this
$w ( “#MaintPwcaltext” ). text = parseFloat ( Number ( ( rmrMale + tefMale + eee + neat ) * daysinweek )). toLocaleString ( ‘en-US’ , { minimumFractionDigits : 0 , maximumFractionDigits : 0 });
Thank you you are the live savior.