Responsive product page using css flexbox

Community feedback

• 

  Oluwakemi Omoyeni•300

  @Captressketh001Posted about 2 years ago

  In your addToCart function, do a check to know if the product is already in the cart before adding a new one to it. So if it already in the cart, just increase the item quantity.

  const addToCart = () => { if (targetNum <= 0) { emp.style.display = 'block'; buy.style.display = 'none'; return }else{ emp.style.display = 'none'; buy.style.display = 'block'; const id = new Date().getTime().toString(); const element = document.createElement('div'); element.classList.add('itemI'); const attr = document.createAttribute('data-id'); attr.value = id; element.setAttributeNode(attr); cont.appendChild(element); if(product.id == id ){ element.innerHTML = <img src = ${product.src} class="tre"> <div class="cart-text"> <p>Fall Limited Edition Sneakers</p> <p>${price.textContent} * ${targetNum} $${125*targetNum}</p> </div> <div class = "del"> <img src = './images/icon-delete.svg' > </div> }else{ product.qty +=1 } }

  I think this should help.

  Marked as helpful

  1

  ---

  

  Segun Ojo•60

  @lil-dev16Posted about 2 years ago

  @Captressketh001 Thanks alot!

  0
• 

  Erick•270

  @d3bu6m3Posted about 2 years ago

  Congratulation for finishing this challenge the approach you can do to achieve it using Javascript is to use innerHTML & insertAdjacentHTML

  Use innerHTML to replace/update current Item price&quantity

  Use insertAjacentHTML to add (different item ID) to the cart

  1 item = 1 cart item (data-totalitem=1)

  2 item = 2 cart item (data-totalitem=2)

  1 item/2 quantity = 1 cart item (data-totalitem=1)

  Marked as helpful

  1