How to format and display International prices in CMS Listings

Hello everyone,

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 ?

Thanks a lot

1 Like

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.

I tried to add these in the “Before tag” settings

<script>document.write(numberWithSpaces('<div class="PrixThumb">'));</script>
<script>document.write(numberWithSpaces('<div class="prixthumb">'));</script>

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>

Works like a charm !

@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>

Here is a reference to the function

4 Likes

Mod Note: I changed this topic title to be more accurate and helpful for other forum members.

1 Like

@webdev : Whoah, even better, thanks a lot !
I fiddled a bit with it on the demo page, this looks really flexible.

Last question on that topic, would you recommend placing this script on the project settings, or on each page (2 for this project) that requires it ?

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.

1 Like

@webdev I tried using your code this morning but it’s not working.
No euro symbol displaying, no space after 3 digits (even though I selected ‘fr-FR’)

I also tried changing the quotation marks you used for language as I noticed it was different than what was in the documentation :

from `en-US` to 'fr-FR'

I also used the same class for both my product page prices and my catalogue/homepage prices and changed the selector to “.prix”

Am I doing something wrong ?

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));


            })
            
        });
        

produced this in my browser:

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.

2 Likes

It’s working now, thanks a lot man ! Super helpful !

Handy snippet thanks @webdev

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.

Here’s my read-only link: https://preview.webflow.com/preview/revista-copa?utm_medium=preview_link&utm_source=designer&utm_content=revista-copa&preview=9a4579961d3d3ad2e6f88d41be354a54&pageId=60774f86aae6c4666030193e&itemId=6078b4113ecc25b03a721e0d&mode=preview and I’m working off the “Revistas Template” page.

I’d like it to look like the image below :point_down:
Screen Shot 2021-04-21 at 7.43.26 PM

But it looks like this :point_down:

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:

  1. 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.
  2. 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?

Thanks for your help!