Skip to content
OverviewSolutions
2
Comments
6
Paolo Vilardi
@PaoloVilardi

All comments

  • Paolo Vilardi•160
    @PaoloVilardiPosted over 1 year ago

    Hi @blaqq2, congrats for the great solution! Just a few things:

    • the lightbox small images: you are changing the opacity while selected or on hover when you should apply a sort of white mask or filter on top. You can achieve it by using the pseudoelement after with
    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).

    • in the lightbox you should add the hover option for both the arrows for next and previous element and for the "x" close button
    • last thing I would change 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.

    Congrats again for your great solution!

    Marked as helpful
    1
  • Paolo Vilardi•160
    @PaoloVilardiPosted over 1 year ago

    Hi @Manish-d-art, congrats for the great solution! Just a few things:

    • the icon that indicates the item quantities on top of the cart (the orange one) is too big, I would add a fixed height (something like height: 20px; will do the work)
    • the lightbox small images: you are changing the opacity while selected or on hover when you should apply a sort of white mask or filter on top. You can achieve it by using the pseudoelement after with
    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).

    • in the lightbox you should add the hover option for both the arrows for next and previous element and for the "x" close button
    • Last thing I would change 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. Congrats again for your great solution!
    Marked as helpful
    1
  • Gabriel Alves•40
    @Gabreel-AraujoSubmitted over 1 year ago

    please, if you think you could have done it better, feel free to say, I did it with some difficulty with javascript, and css to position some things, but mainly javascript, so feel free for tips and ideas

    E-commerce product page

    1
    Paolo Vilardi•160
    @PaoloVilardiPosted over 1 year ago

    Hi Gabriel, it seems like you need a couple of adjustments to make it perfect! Here's a few:

    • the cart when is empty has the checkout button while it shouldn't appear
    • when you add items to the cart, the cart icon which should indicates the preview of the item quantities inside of it doesn't contain any value (it's just a round orange icon)
    • the total price of the item in the cart is static in your case (always 375) while you should calculate it by multiplying the actual price of the item for the quantity
    • the delete button of the item in the cart doesn't do anything, it should delete the items from the cart (both logically, so delete it from the array or list where you store the cart in JavaScript, and visually, so it shouldn't appear in the cart section. Remember in this case to check if the cart is empty, if it is so, your cart should appear empty (in this case, with the "Your cart is empty" section)
    • you didn't implement the lightbox, which should be a whole new section on top of the product page while the background is sort of obscured Let me know if you need some deepening about any of these. Happy coding!
    Marked as helpful
    0
  • Mdhamed•100
    @mdhamed238Submitted over 1 year ago

    Making the website flexible on small displays was the most difficult element. Please feel free to provide feedback :) Any suggestions for improving the website are greatly appreciated.

    E-commerce product page

    1
    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
  • Zarko•160
    @zarkogolocorbinSubmitted over 1 year ago

    Hello everyone! Here is my solution E-commerce product page. Any feedback or suggestions are welcome. Thank you!

    e-commerce product page

    1
    Paolo Vilardi•160
    @PaoloVilardiPosted over 1 year ago

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

    • the border radius on the buttons to make'em round
    • the text color on the navigation menu up top
    • the changing color on hover on the icons of the lightbox. One last thing is the lightbox small images: 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). Hope this is helpful and congrats again for this great solution!!
    Marked as helpful
    1
  • Paolo Vilardi•160
    @PaoloVilardiPosted over 1 year ago

    It appears as a great solution, congrats! The only thing I can say 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. But it's just a really small thing. Congrats again for your amazing solution!

    0