Number Formating - Please Help

I’m implementing a shopping cart script found on GitHub into my design.
The number values are without decimals and I would like to know how to edit the script so it will display .00 after the number values.
As far as I understand the script needs to be modified here:

	_convertString: function( numStr ) {
			var num;
			if( /^[-+]?[0-9]+\.[0-9]+$/.test( numStr ) ) {
				num = parseFloat( numStr );
			} else if( /^\d+$/.test( numStr ) ) {
				num = parseInt( numStr, 10 );
			} else {
				num = Number( numStr );
			}
			
			if( !isNaN( num ) ) {
				return num;
			} else {
				console.warn( numStr + " cannot be converted into a number" );
				return false;
			}
		},

Here the complete JavaScript
Any help would be very much appreciated.
Thank you

Did you try using .toFixed(2) ?

1 Like

There is a private _formatNumber() function already made.

… thanks for your replies.
If I change:

		_formatNumber: function( num, places ) {
			var n = num.toFixed( places );
			return n;
		},

To:

		_formatNumber: function( num, 2) {
			var n = num.toFixed( 2 );
			return n;
		},

It breaks the whole script.
How do I change it properly …?..

Leave it as it originally was,

		_formatNumber: function( num, places ) {
			var n = num.toFixed( places );
			return n;
		},

But when you call it, call it like so: _formatNumber(233.544, 2)

That will set the value of num to 233.544 and the value of places to 2. This is the whole concept of parameters to functions.

1 Like

… tried it like you suggested, but it’s also not working and breaks the script.

		_formatNumber: function(233.544, 2) {
			var n = num.toFixed( places );
			return n;
		},

Ok, @Job2Do, I think the whole referencing a function thing is messing you up. If you want to use the function _formatNumber(), then place that ABOVE your other functions, and leave it EXACTLY as you got it originally:

_formatNumber: function(num, places) {
  var n = num.toFixed( places );
  return n;
},

Just paste that, as is. Then, where you are trying to use two fixed decimal places, you call that function:

let aRandomNumber = 2365.4245;
let precision = 2;

// Now we create a string, which is the number formatted to a precision decimal
let myFormattedNumber = _formatNumber(aRandomNumber, precision);

The function itself isn’t entirely necessary, and in your case seems to have caused confusion. You could just as easily have done:

let aRandomNumber = 2365.4245;
let precision = 2;

// Now we create a string, which is the number formatted to a precision decimal
let myFormattedNumber = aRandomNumber.toFixed(precision);

If you look in your github reference, you will find a function populatePayPalForm() – in that function, the last few lines use the this._formatNumber() function.

If you look further down in the source, you’ll find a function displayCart(). Within that, there are a few places where currency are being displayed. For example, around line 253. Where you see item.price or total, wrap those:

  var price = this.currency + " " + this._formatNumber(item.price, 2);

… thanks a lot for trying to help, but no matter where I use you code suggestions the script breaks.
In fact I need the decimal for just price and subtotal.
It seems after trying so many variation I’m totally lost now …

Did you clone the repo or do you have a fork, and if so are you pushing to it? It is a lot easier to help if we can see how you are using the code.

This would be ideal: Fork the repo, clone it, make your changes and push them, then post a link to your repo.

… sorry. but I never done this before (fork and clone a repo) but I will look into this.
I’m one step ahead though by using the following script modifications:
Line 437:

		_formatNumber: function( num, places ) {
			var n = num.toFixed(2);
			return n;
		},

Line 253 replaced with:

var price = this.currency + " " + this._formatNumber(item.price, 2);

Now the item price displays the decimals.
Still need to this for subtotal as well and I’m done, but can’t figure it out on my own how to do it.
Hopefully someone can point me in the right direction like snowmonkey did.
Thanks to everybode giving me a hand here …

… yes, you are right, I changed it back to the original:

		_formatNumber: function( num, places ) {
			var n = num.toFixed( places );
			return n;
		},

It still works.
How do I go about the subtotal …?..

… I think it’s Line 268

… I tried to replace Line 268 with:

this.$subTotal[0].innerHTML = this.currency + " " + this._formatNumber(total, 2);

It didn’t work and I’m not even sure if line 268 is the correct line to apply changes …

Yes, I got this error message in the console:

TypeError: num.toFixed is not a function[Learn More] jquery.shop.js:437:12

I never done anything like this in JavaScript and it’s very hard to understand.

Looking at that error, it seems it’s saying that the value being passed into the function (in this case, total) may not be a number. I might suggest, just prior to line 268, that you add a line to show the value of total in the console. Something as simple as: console.log(total, typeof total); would show you both the value, and the type, of the variable you’re about to send into the _formatNumber(). Of course, you would need to have the developer tools open, and have a little familiarity with using them.

For someone who has done smaller projects in javascript, and even someone who has a passing familiarity with jQuery, this is a pretty sizeable undertaking. I think it may be do-able, but I do hope you’re not under a time crunch, as I suspect you may have a learning curve here.

Definitely consider @camperextraordinaire’s suggestion of putting this into a location where you can share your work, where we can check it out and make possible changes on the fly, forking separate versions so you can see what impact our changes might have.

Please let me know if this is usable : Cart

I really hope you are doing this as a learning thing and not because you want to use it in production.

  1. Right now your just changing the way the price is displayed, in one place (displayCart). The real price is not even that string, the price comes from a custom data attribute (data-price) in the HTML (see handleAddToCartForm). As far as i can tell it already handles decimal numbers the way you want, go to the HTML and add “50.25” to the first wine’s data-price, add 3 of them. You can see the price and sub total is with the correct decimal points (although it’s displaying it with a “.” not a “,”). You can also see it in the Session Storage (dev tools > application tab > storage), which is how it stores the data.

  2. Not sure what your doing on line 255/282, i guess your trying to add the product image to the cart display, but that is not right.

I’m not even going to pretend like i am good enough to fully understand the code base and guide you, so i will likely bow out i think.

I tried what you suggested, and increased the item value to 25.50 and it does show decimals in the subtotal.
If I set the item price to 5.10, the subtotal in the cart shows 5.1 not 5.10.
By the way the modifications to display a product image I’ve got from the author of this script and I’ve managed so far to display an image placeholder in the cart and still working on it to call the actual image.
But that’s another subject and doesn’t belong here I guess.
I tried seamoney’s suggestion and add this prior to line 268, but it didn’t change anything.

console.log(total, typeof total);

Same results as before when I modify line 268 afterwards.
I tried uncountable variations in different places to display decimals for subtotal since I started this thread, but I’m unable to get it done.
It would be nice to know if line 268 is the correct line to edit.

This is not correct.

line 255: src=\”” + product.image + “\”>

Log it out to the console console.log({html}) look at the HTML. You are using “Left Double Quotation Mark”, use the correct quotes.

src=\"" + product.image + "\">

line 255: product.image

This is not the image, this is the image -> item.image

line 288: cartProduct.image

This is not the image, this is the image -> cartItem.image

(note i gave the wrong line number in my post)

I might look more into this later, but i just wanted to point out the problem i saw.