E-commerce product page (No Framework / Vanilla JS)

Community feedback

• 

  Jo89 😈•380

  @AhmadYousif89Posted over 1 year ago

  Hey Kevin 👋

  Your solution looks awesome 👍. but I believe it has more room for improvement, and these are some suggestions you might find helpful.

  • I like the idea of having more products to display, however, this page is considered for a single product display and not to showcase all available products. therefore, it would be much better if you make a dynamic route for each product depending on its id so that each product will have its page that showcases its details.

  • for the side menu on mobile devices I see a fake backdrop overlay but why 🤔 it would be better if there is a real backdrop that closes the menu when clicked because as of now I can interact with the elements in the background and ofc that's not good. for example, while I'm opening the menu I can add items to the cart!

  • I see you have a backdrop overlay when opening the lightbox, but unfortunately, it doesn't serve its normal function which is closing the modal.

  • the main image is still clickable on small devices even though the lightbox is disabled and I can't see it.

  • it would be nice if the user can click anywhere to close the cart menu (I notice that opening the side menu also closes it).

  • this is a personal preference thing, but I would rather have a message telling me that the item was added to the cart (maybe under the "add to cart" button) rather than opening the cart and then closing it after a short period of time.

  • I know that this's just a dummy app, but the discount value from the original price after calculating the discount rate doesn't make sense 😅

  I hope you find my feedback helpful. Have a nice day 👋

  Marked as helpful

  1

  ---

  

  Kévin Burle•370

  @kevinburlePosted over 1 year ago

  Hi @AhmadYousif89,

  Thank you for taking the time to leave me a very constructive and helpful feedback 👍.

  For the first suggestion you gave me above, it's true I also thought that it's a product page and that several products had nothing to do on it but I wanted to 'imagine' that this page be used as a component in a home page for example with 2 or 3 products displayed that can be added quickly to the cart..But the idea of a dynamic route with ID is much more appropriate in this case.

  I'll try to come back on the project by implementing your suggestions and UX issues.

  Have a nice day 👋

  1
• 

  Shane Chaffe•900

  @ChaffexdPosted over 1 year ago

  Hi,

  This is a slick project! I really like it!

  I have one piece of feedback that initially made me as a user happy, when I added the first shoe to the cart I saw the basket update and drop down, that was pretty neat. But when I done this for another shoe, I didn't see it. I.e. if you scroll down, you no longer see it - I think it would be super useful for the user to see either the navbar cart icon increment or that drop down window present when you scroll so the user can track their cart when they add. I think that makes for a positive user experience rather than scrolling back to the top to check again.

  Other than that, kudos! Amazing use of vanilla JS!

  Marked as helpful

  1

  ---

  

  Kévin Burle•370

  @kevinburlePosted over 1 year ago

  Hey @Chaffexd,

  Thank you for your comment and the helpful feedback 👍 Indeed I need to update the project to fix all the small (or big 😅) problems related to the UX. But it's worth it because the project implements quite interesting concepts

  Have a nice day 👋

  0