Product List with Cart using ReactJS

Community feedback

• 

  Jay Khatri•4,230

  @khatri2002Posted 2 months ago

  Hi @samoina!

  The developed solution looks good! Below are some suggestions for improvement to enhance user experience and functionality:

  ---

  1) "Add to Cart" Button Hover Issue

  When hovering over the "Add to Cart" button, the background color changes, but the icon-add-to-cart image blends in and becomes invisible due to similar colors.
  This negatively affects user experience because the icon should remain visible at all times.

  • Use CSS filter to modify the image color on hover. OR
  • Use an SVG icon instead of an image. SVGs allow color customization using fill or stroke, making them more flexible.

  2) Cart Quantity Should Start from 1

  When clicking "Add to Cart", the cart appears, but the quantity is set to 0.
  It should default to 1 because clicking "Add to Cart" implies the user wants at least one item. This is the standard approach followed by most e-commerce apps and websites.

  3) "Confirm Order" Dialog Exceeds Screen Height

  When all 9 products are added, the order summary overflows the screen, especially on smaller devices.
  The dialog should not exceed the screen height.

  Set a max-height with scroll support:

  max-height: 70vh; /* Limits height to 70% of the viewport */
  overflow-y: auto; /* Enables vertical scrolling */
  

  OR

  Limit the order items section height:

  .order-items {
      max-height: 18rem; /* Adjust as needed */
      overflow-y: auto; /* Allow vertical scroll */
  }
  

  ---

  Keep up the fantastic work! 🚀

  Marked as helpful

  0
• 

  Samoina•260

  @samoinaPosted 2 months ago

  Thank you Jay, the blending of the colors on hover must have escaped my mind. this is helpful

  2. I also hadn't thought abut cart quantity starting from 1 for the reasons you stated...that's insightful

  3. i will be sure to correct the modal appearance too.

  again, thanks for taking the time to share this.

  0