Thanks to this post, I managed to add a space before 3 digits to display prices properly on my product pages.
Now, I need to add it also to the collection list on my “catalogue”. And this is causing me some troubles because every collection item is wrapped in a link, and I can’t embed my code like I did on my collection page (Aka : “HTML Embed can not be placed in a Link.”)
Link for reference
FYI : You can see it working on the page “Proprietés template”, and the fix is needed on the page “Catalogue”. Currently this is a H2, but I have to format it properly.
Is there any known workaround ?
You could solve this problem by using custom code on the page (before body) that manipulates the text node you are trying to change. Either with vanilla javascript or jquery.
Thanks !
It’s my first time handling javascript though, I actually had to find a cheatsheet to try and break this script down a bit to understand what it was doing.
But i’m this is probably not the way to go since it’s not working at all…
Any hint on what to look for ? I’m willing to put in the work but not sure where to look first.
Edit : Okay, I actually lost a few braincells in the process but I found the solution.
For those interested here’s an explanation and here is my code :
<script>
var elements = document.querySelectorAll('p.prixthumb'),
i;
for (i in elements) {
if (elements[i].innerHTML !== undefined) {
elements[i].innerHTML = numberWithSpaces(elements[i].innerHTML);
}
}
</script>
@steven.riot - I see you were able to target your element with vanilla JS. Good.
Here is some code I cranked out for you that does a better job and is more flexible since it formats the number as either currency or decimal with support for any language when modified. Requires jQuery (because it is already loaded in wf). All anyone would need to do to reuse it is changed the selector $(".prixthumb") to match where it exists on their page or site. Then supply the correct parameters in the Intl.NumberFormat() function.
<script>
$(document).ready(function () {
$(".prixthumb").each(function () {
//this is the target text string converted to a number
var numprice = Number($(this).text());
// create a function to set the International number format
var nprice = Intl.NumberFormat(`en-US`, {
style : 'currency',
currency: 'EUR',
currencyDisplay: `symbol`,
minimumFractionDigits: 0
//maximumFractionDigits: 0
}
);
// replace the current value for the new formatted value
$(this).text(nprice.format(numprice));
})
});
</script>
You can place it in the project custom code, it will only fire if the selector finds a match. Just don’t change the class in the designer without changing the selector in the script. That way anyplace you display a price with that class on the element, you will have consistency.
When copying and pasting code in the forums, sometimes the apostrophe gets converted to backticks. You want to be using apostrophes in this case.
This block of code
$(document).ready(function () {
$(".prix").each(function () {
//this is the target text string converted to a number
var numprice = Number($(this).text());
// create a function to set the International number format
var nprice = Intl.NumberFormat('fr-FR', {
style : 'currency',
currency: 'EUR',
//currencyDisplay: 'symbol'
minimumFractionDigits: 0
//maximumFractionDigits: 0
}
);
// replace the current value for the new formatted value
$(this).text(nprice.format(numprice));
})
});
Note: I had downloaded the page to my local machine and it had two prices, with the first wrapped in a div.prixthumb. I changed the target to .prix for you.
Hey @webdev, your snippet was extremely helpful. Thank you! I know it’s been a while, but I’m trying to use it to format my CMS listing pricing to Chilean Pesos. Everything seems to be working fine, I just want to know if there’s an easy way to add dots to separate thousands. So “$7.990” instead of “$7,990”. Right now, there’s no separator shown. Looks like the Intl.NumberFormat() function doesn’t include it for spanish speaking countries.
I moved the script to the project’s custom code section because I wanted to target other CMS listings and it appears the dot is applied after 5 digits, so I guess that’s good enough.
Hello, I’m super interested in this topic since I’m trying to format an item page.
Basically from a CSV import into a collection, I’m trying to format some values, I’d like to start from a currency one. Following the suggestion, I can’t understand two things:
How can I target the text string I’d like to format? Since I’m using the client-first style guide I have many combo classes applied to a single text element.
Where should I add the custom code in the project setting? And If I already have a script for tracking, should I copy this into the existing <script>...</script> tag or I can have more than one <script>...</script> tag?
