e-commerce product with CSS Flex.

Community feedback

• 

  Jo89 😈•380

  @AhmadYousif89Posted over 1 year ago

  Hi Nermen 👋

  Your solution looks beautiful 👍 and I have some suggestions for you that I think might be of use to you :

  • the backdrop overlay is not taking the full height of the screen therefore if I scroll down I can see and interact with elements on the screen.

  • I can't click on the backdrop to close the modal, which is typical for any backdrop overlay.

  • as @visualdenniss mentioned there isn't any visual feedback when the user clicks on the "add to cart" button whether on the cart icon or beside the button itself

  • IMO the lightbox should only be visible on bigger screen sizes (it's not ideal to have them on the mobile view) but it's just my opinion 🤷‍♂️

  • I can open the cart modal and then open the lightbox but then I can't close the cart modal because the lightbox backdrop is open which is 🤯

  • would be a nice touch if I can click anywhere to close the cart modal

  • the profile icon is too small on the mobile screens

  • for some reason I can add an item with 0 qty to the cart!

  you asked for any suggestions and there you have it 😂

  Have a nice day 👍

  Marked as helpful

  2

  ---

  

  Nermen•270

  @NermenElefkyPosted over 1 year ago

  @AhmadYousif89 Thank you for the feedback. I have made changes to the webpage but I can't understand what you mean by "I can open the cart modal" (point 5).
  Have you some time to take another look at the page?? I will be happy for any other changes to the page

  0

  

  Jo89 😈•380

  @AhmadYousif89Posted over 1 year ago

  @NermenElefky

  I see you have fixed a lot of the issues you had before 👏 good job, but I still see other issues :

  • you added the ability to click "anywhere" to close the cart modal, but it wasn't a clean fix but more like a bandied fix, because if I click on the top header it doesn't close unless I click outside the header, instead you should detect if a user is not clicking on the element itself and then close the cart otherwise " clicking inside/on the cart icon " remains open or reopen it.

  • clicking on the backdrop does close it but so does the side menu., meaning that if I click inside the backdrop or anywhere inside the side menu it also closes the menu, which is not the ideal behavior user should only close the menu if he/she clicks explicitly on the backdrop or the close icon on the top left corner.

  • the side menu sometimes acts funny, if I click on the close icon or one of the links it closes the menu as I mentioned in the previous issue but now if I click again to open it I see another overlay on top of the menu and looks distorted and the link gets shifted up to the top left corner 🤷‍♂️ see here

  • using img elements as buttons is not a good idea.

  • I see that you are wrapping the elements with the backdrop overlay as a container and that's not good the backdrop should only serve one purpose which is displaying a " backdrop on demand " so it shouldn't really take any children inside of it or have the need to know about them (unless of course the business logic needs it somehow).

  if you have any questions don't hesitate to ask 👍

  Marked as helpful

  0

  

  Nermen•270

  @NermenElefkyPosted over 1 year ago

  @AhmadYousif89

  Thanks for your feedback 🙂. It was very useful and I learned a lot. Have you some time to take another look at the page ?? I am very interested about your next feedback😊.

  0

  

  Jo89 😈•380

  @AhmadYousif89Posted over 1 year ago

  @NermenElefky

  Hi again 👋

  I'm so glad that you have fixed all of the previous issues you had before, I have some minor suggestions they are mainly around styling :

  • the cart icon size looks good on the mobile view but on the desktop, it's a bit small.
  • the shape of the counter on the cart icon doesn't look good maybe adding some inline padding would fix that.
  • the main image has a cursor pointer on it for no reason indicating that it's clickable where it's not (in mobile).
  • the discount badge is a bit small and needs to be bold so as the original price IMO.
  • there is no visual feedback after clicking the "add to cart" button indicating an action has occurred (this is maybe the most important out of all).

  overall you have done a great job 👍 keep up the good work.

  btw I just updated my solution with new features let me hear your thoughts about it 😃

  Marked as helpful

  0

  

  Nermen•270

  @NermenElefkyPosted over 1 year ago

  @AhmadYousif89

  Thank you for taking the time to help me in the project😊. Your feedback was very helpful.

  0
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Great work there!

  Everything seems to be working fine. Very nice implementation with the lightbox and slider as well.

  2 Suggestions:

  -You can add a little count at the top edge of the shopping cart icon to indicate users that have an item added to the cart, which is very common for shopping carts. I clicked on add to cart for a while i thought its not working.

  • On mobile, seems like those hover underlines appear to be too far away from the link itsef, so i guess it is just using the desktop version. You might consider adjusting it for mobile as well. (Desktop link hover underline is very nice btw!)

  Hope you find this feedback helpful!

  Marked as helpful

  0
• 

  LEYE👨‍💻•150

  @usernameisleyePosted over 1 year ago

  This was very niceee!!! Learned a lot from your code🙂

  0