/ecommerce-product-page

Product page featuring lightbox product gallery and cart functionality implemented with HTML, CSS, and JavaScript based on UI designs from Frontend Mentor. Enables user to add and remove items to/from cart and view cart. Also includes side navigation menu for mobile view.

Primary LanguageCSS

E-commerce Product Page

This e-commerce product page was built using HTML, CSS, and vanilla JS. The page features a lightbox product gallery and cart functionality. Users are able to add and remove items to/from cart and view cart. Furthermore, there is a side navigation menu for mobile view. The design for this website was provided by Frontend Mentor.

Overview

Key Functionality

For this Frontend Mentor challenge, the goal was to implement the following functionality:

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Open a lightbox gallery by clicking on the large product image
  • Switch the large product image by clicking on the small thumbnail images
  • Add items to the cart
  • View the cart and remove items from it

Screenshots - Desktop

Screenshots - Mobile

Links

My process

What I learned

This project was a great opportunity to learn how to set up modal/lightbox functionality - I used this w3schools code as a starting point and modified it to use CSS grid so that it would be responsive. Another issue I had to deal with was adding the image overlay color on hover for the thumbnail images of the modal because this turned out to have knock on effects for the layout of the page. (This stack overflow post explaining how to implement the image hover color overlay functionality also proved helpful.) I'm not sure if this was the best solution but I nested more divs to ensure that the elements of the page remained centered correctly and to make sure that they still responded to the resizing of the browser window.

I used this code as a starting point for understanding how to set up the shopping cart functionality in conjunction with this Stackoverflow post on creating minus and plus buttons that update the field of a form.

To set up the mobile navigation menu as a sidebar, I turned to w3schools again and this article was incredibly helpful. I also found a Stack Overflow post on adding an overlay when the nav bar is opened.

Useful resources

Author