E-commerce product page

Community feedback

• 

  Paolo Vilardi•160

  @PaoloVilardiPosted over 1 year ago

  Hi Mdhamed, congrats for your amazing solution! It seems pretty legit, you just need to adjust a few things to make it "pixel perfect":

  • the changing color on hover on the icons for changing image of the lightbox
  • the border around the small images both in the "normal" section and in the "lightbox" one
  • the icon cart does not have the preview for the quantity of items inside of the cart
  • the lightbox small images For this last one: you are changing the opacity while selected when you should apply a sort of white mask or filter on top. You can achieve it by using the pseudoelement after with content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--white); opacity: 0; transition: all 0.2s ease-in-out; and then when selected change opacity to the value you want (something like 0.7 would do the job). Another thing in the lightbox is that the "x" button doesn't close the section, while clicking outside of it does it. Just add a listener to this button to achieve it. Last thing is that adding products already in the cart don't update the cart by adding the quantities but by replacing them. It needs just a little trick in the javascript: just check if the element is already in the cart, if this is true take the quantity stored in the item and update it, both in the logic and in the html for the icon on the cart and for the item inside the cart. Remember to update the total price too Hope this is helpful and congrats again for this great solution!!

  Marked as helpful

  1

  ---

  

  Mdhamed•100

  @mdhamed238Posted over 1 year ago

  @PaoloVilardi Thank you for your valuable feedback! I have implemented the suggestions you provided and made the necessary adjustments to improve the solution.

  Take care ^^

  0