Number Formating - Please Help

JavaScript
27

For the total display.

line 268 (original file line number):

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

However there is a problem, if we stick with the “5.10” example. If you add 3 bottels of win at the price “5.10” the total is “15.299999999999999”. We can round it using _formatNumber.
line 375 (original file line number):

var sTotal = total + subTotal;
// Add this line below
sTotal = self._formatNumber(sTotal, 2);

Pretty sure your not supposed to use floating point number math for currency, you loose precision. There are libs that can deal with the problem.

Two problems remain i have not looked into:

  1. If you change the quantity in the shopping cart it breaks the images.
  2. They also breaks when you press update cart.
28

Thanks a lot for fixing the item image issue, I wasn’t expecting any help with this.
Seems that even the author of the original script got this wrong.
The quotation marks where my mistake and I couldn’t even see it at 1st after you were pointing it out as I’m having trouble with my eyesight but the product.image and cartProduct.image entries he got wrong.
This leaves me only with the update cart issue.

Displaying the decimals is working fine now for the cart.html except if 1 of several items in the cart get deleted, the updated subtotal is still without decimals.
I tried to edit line 231 like this:

// From:
self.$subTotal[0].innerHTML = self.currency + " " + self.storage.getItem( self.total );
// To:
self.$subTotal[0].innerHTML = self.currency + " " + self._formatNumber(self.storage.getItem( self.total ), 2);

But it didn’t work so my question is if this is the correct line to edit as I’m not sure that it is.
Thanks again very much for your help it’s very much appreciated.

29

No, you are manipulating the display again.

line 223 (original line number):
Insert a new line and add this.
updatedTotal = self._formatNumber(updatedTotal, 2);

Note however that there is a bug in the original code, if you add 3 of the same kind of wine and delete the last 2 you get a total of 0. This doesn’t happen if you add 3 different kinds of wines. I might look into it but i can’t promise anything.

30

Thanks, that worked great.
What I’ve managed is to get the decimals into the checkout.html as well which I wouldn’t be able to do without your help.
Could you please have a look if that’s correct:

// Line: 281 (Originally: 280) From:
var cartPrice = this.currency + " " + cartItem.price;
// To:
var cartPrice = this.currency + " " + this._formatNumber(cartItem.price, 2);
// Line:  297 and 298 (Originally: 296 and 297) From:
this.$subTotal[0].innerHTML = this.currency + " " + this._convertNumber( subTot );
this.$shipping[0].innerHTML = this.currency + " " + cartShipping;
// To:
this.$subTotal[0].innerHTML = this.currency + " " + this._formatNumber(this._convertString(subTot), 2);
this.$shipping[0].innerHTML = this.currency + " " + this._formatNumber(this._convertString(cartShipping), 2);

Should be ok I guess.
Still trying to figure out how to keep the image intact when the cart is updated.
I think new lines need to be added to the update cart section below line 339 and 344.
Could this be right ?

31

Yes.

Image on cart update

line 338
// New line add
var image = $row.find( "img" ).attr('src');

line 340
// Add the image to the cartObj
var cartObj = {
  product: pname,
  price: pprice,
  qty: pqty,
  image: image
  };
32

  1. The delete from cart method does not account for multiple items of the same type (name) being added to the cart individually. It simply loops over the items array and removes an item based on the product name.

  2. One option, which i really think should be implemented no matter what is giving each item a unique ID in the session store. Possibly also adding it to the DOM as a data-attribute.

  3. There is a problem with the logic of adding multiple items of the same type to the cart one by one. The result of doing this should really be the same as changing the quantity in the shopping cart, there should not be multiple entries for the same product.

  4. Incorrect use of <meta charset> in original code.
    // Wrong
    <meta charset="utf-8" />
    // Right
    <meta charset="utf-8">

  5. You have a stray script tag in checkout.html line 52

33

… sorry, for getting back so late.
Got the html corrected and cleaned up, I didn’t pay much attention to it because of the JS modifications.
Everything seems to work fine regarding the decimals, thank you very much for your help with this.

There are 2 things I would like to add to the script like:

  1. Add an item counter to the cart.
  2. Display total price after updating when quantity is changed in the cart.

Should be possible by adding 2 more td tags to the script I guess.
If I get this done somehow I would like to change the whole template to Bootstrap 4 and make it accessible for everybody on GitHub (without me taking credit for it).
Just for people like myself who don’t know how to write JS by themselves to use it.
Thanks again …