Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

React components : Ecommerce Product Page

@Francoshum95

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I welcome any code review or feedback to improve the performance of this implementation. Please checkout Repo for more details. Thank you.

Community feedback

Saba 90

@sabapetriashvili

Posted

Hello! Great job on completing the challenge!

I was going through your project and found out that if user adds only one item to the cart and keeps pressing on the add to cart button few times, it doubles the amount of item automatically. I think, it would be nicer user experience if you fix that bug!

one solution for that can be following: you can add event listener on add to cart button and within the function for every click define the item number innerHTML equal to 0 or 1.

1

@Francoshum95

Posted

@sabapetriashvili

Thanks for the recommendation. I have fixed the issue. For this project, I used React.js and wrapped a Context at the top level of the page. The Context has cartItems and addCart(productItem), so I could share the state value with the children throughout the page.

As for the bugs you found, I mistakenly used productItem: {..., productQuantity: number} as a state value to change quantity. Therefore, when onClick, the productItem: {..., productQuantity + n} caused a bug. I used productItem to present it because productItem would be added to the cart, and I wanted to write less code. However, it turned out that I misunderstood it, so I created a separate state value to control the quantity.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord