Gabriele Ferro Home

Basic Cart Functionality

Day36: 1 September 2020

**Today’s Progress:**

Once I figure it out how to store Objects into an array, it was relatively easy to write the code to fetch the name and the price of every product in the cart.

This code is ugly. I know.

This code makes an asynchronous request to the back-end, and when it's ready the block of code is executed.

It creates two variables:

  1. myCartTable stores the HTML element with id "panier" (basket in French)
  2. myCart calls the localStorage method getArray to retrieve every element with the "AddedToCart" key.

Then, for every element in this array, we create a row inside our table using the native DOM API for manipulating it using a combination of:

For the moment, the total price is shown on the console.

Soon, I will add some love with Bootstrap 4.


I wanted to see a more professional way to write this code and I found this article from Valentino Gagliardi. He uses HTMLTableElement to create and manipulate the table.

Surfing Valentino's blog I found an interesting guide about the Error Handling. This will be very handy soon.

**Link to tweet:**

[twitter-follow screen_name='20Gabriele20']

July 2024


Gabriele Ferro Home
Copyright © Ferro Gabriele. All rights reserved.