Streaming live at 10am (PST)

How to format and display International prices in CMS Listings

#1

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

#2

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.

#3

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 !

#4

@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

1 Like
#5

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

1 Like
#6

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

#7

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
#8

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

#9

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.

#10

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