Product List with Cart using HTML CSS Javascript and SCSS

Community feedback

• 

  ricardoychino•190

  @ricardoychino

  Posted 12 months ago

  Hello,

  Congratulations with your solution, it looks very nice. Just want to point out some things that I found:

  1 - As the quantity of the products are already initiated with 1, it is a little bit confusing in terms of usability when you click and you don't have a visual feedback on the button (we can see it showing up at the cart, sure, but it forces us to spread our range of vision where we need to focus, causing certain negative experience). I suggest:

  • starting the initial quantity with 0

  • instead of controlling which component to appear (button or quantifier) by hover, control them by classes or another atribute, only changing them if the quantity of that product is zero (shows the button 'Add to cart') or has one or more items (quantifier). When we have at least one item of that product in the cart, it is already there, so personally I think showing 'Add to cart' makes less sense than showing the quantifier. And also, I think it gives you a better visual feedback that indicates that the product is already in the cart (currently we need to hover the button to see if the quantity is greater than 1 - one more reason why it could be better to start the counter with 0 - or compare the name of the product with the name of the items in the cart)

  2 - When you remove a product directly from your cart, the quantifier of the product didn't reset. You did the splice in removeItemFromCart, but didn't alter the quantity on the product list

  3 - For the cart's data structure, personally I'd go with a Map instead of an array, here's why:

  • You wouldn't need anymore to check positionThisProductInCart in your methods. Use the ID of the product as key and the quantity as its value. For example:

  // Declare the cart
  const cart = new Map() // or Map<number, number>() if you're using TS
  
  // Add or sum up quantity
  cart.set(+productId, (cart.get(+productId) || 0) + 1)
  // - `+productId` to convert to a number in case the variable is a string
  // - The cart.get there is to get the current quantity. If it is not included, is 0
  
  // Subtract from cart
  if (cart.has(+productId)) {
    cart.set(+productId, cart.get(+productId) - 1)
  }
  
  // Remove from cart
  cart.delete(+productId)
  
  // Iterate over it
  [...cart.entries()].forEach(item => {
    // entries() gives you an iterable with the pair [key, value], so:
    // item[0] == product ID
    // item[1] == quantity
    totalQuantity = totalQuantity +  item[1]
    ...
    newItem.dataset.id = item[0];
  })
  

  • The entries are also already sorted by the order you added the item, so it is timeline-faithful (? sorry, I'm not sure if I expressed well)

  • Maps are more performant

  • for sure will save you from writing some additional code there.

  You could use a Map to store your products, too, using the product ID as a key and the object of the product as value:

  // At initApp():
  data.forEach(item => {
    product.set(item.id, item)
  })
  
  // At addDataToHTML():
  [...products.values()].forEach(product => ....)
  

  An example of performance improvement within the function addCartToHTML:

  let info = products.get(item.product_id)
  

  That single line could substitute the block:

  let positionProduct = products.findIndex((value) => value.id == item.product_id);
  let info = products[positionProduct];
  

  You don't need anymore to travel the array of products to find its info! If we have thousands of products, it could take some time to find each product in cart

  What do you think? I hope it helps. Cheers

  P.S.: The link to your repository ends up in a 404 page. Maybe it is not set as public? If we could read the code on GitHub, that certainly helps - I did this in the browser's inspector

  00