I need help on removing items and formatting price from shopping cart

Hello friends, I have an ecommerce website I recently built using Html, CSS and JavaScript. I have added the major functionality I want the website to have except for two:

1.) Update Serial number when item/items are removed from the shopping cart

=> **Serial number when item/items are added to the shopping cart **

=> Serial no when item/items is removed from the cart { I need help resetting this}

2.) Format shopping cart items total amount with comma.

Live link:ems-gadgets.netlify.app

GitHub repo link: GitHub repo

When an item is removed, the price is updated with this function:

// ********** update price ************
const updatePrice = () => {
  const cart_row = rowWrapper.children;
  let priceTotal = 0;
  for (let i = 0; i < cart_row.length; i++) {
    const element = cart_row[i];
    const price = element.querySelector('.col-3').innerText.replace('₦', '');
    let priceVal = parseFloat(price);
    let qtyVal = element.children[3].value;
    let itemQty = parseFloat(qtyVal);
    let totalAmt = priceVal * itemQty;
    totalAmt.toLocaleString();
    priceTotal += totalAmt;
  }
  cartTotal.innerText = `₦${priceTotal.toFixed(2)}`;
};

I hope inserting this within the ‘for’ loop would refresh the serial numbers:

element.children[0].innerText = i+1;

In the last statement of code above, change:

priceTotal.toFixed(2)

to:

priceTotal.toFixed(2).replace('.',',')
2 Likes

Thanks for your timely response @Archibald, this second solution doesn’t still fix my problem… I want the priceTotal formatted with comma as thousand separator .
E.g :
₦1,234,567

Ah . . . I assumed you wanted the decimal separator to be a comma, as in several countries.

Please see if this works in place of your last statement in the code in my previous post:

cartTotal.innerText = new Intl.NumberFormat('en-NG', { style: 'currency', currency: 'NGN' }).format(priceTotal).split(".")[0];

Delete .split(".")[0] if you want two decimal places to appear.

1 Like

@Archibald Your solution works fine, thank you!

I’d also like to ask a silly question:

  • how do I get know what products users adds to their cart. Is there a way I can get notified??

  • what do you think I can improve on https://ems-gadgets.netlify.app/

I have no idea!

I see you are using Paystack and they have support available via the ‘payslack’ account on Slack. Another question you need to ask is how do you get to know where to deliver the items to. Also how do you charge for delivery?

Where did you get app.js file from? Is that from Paystack?

The area of a home page seen initially by a site visitor without scrolling is usually the most important part of any website, especially for websites selling things. You are wasting that important space where you could show what sort of things you sell, what special deals you have and why you are the best supplier to choose. (I am viewing your wesbite on a fairly large monitor, not on a smartphone)

You need to provide full descriptions and specifications for each item with a set of good photos. That usually means you need a web page for each item.

There are no prices shown near your ‘Add to cart’ buttons.

The ‘Remove from cart’ buttons do not work.

You show free delivery for order over $60. Shouldn’t that be in Naira currency?

“Providing a simulating online shopping experience” typo: “stimulating”.

1 Like

No it isn’t… The app.js is my main script, it’s linked just before the closing tag of the body element in html

Thanks for your review @Archibald.

  • about the first point you raised on first contextual paint, is implementing a carousel/image slider with great info about my product a better solution??

I will make amendment to tackle other points you highlighted. Thanks

The websites of many large retailers have a slider fairly near the top of their home pages showing special offers etc.

In my view info about each product is best on a web page for each product so you have room for a good description of each product’s features and good photos.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.