This project implements a product details page with an "Add to Cart" feature for an e-commerce website.
- Product Image: Displays the main image of the product.
- Thumbnail Images: Shows smaller versions of the main product image for quick preview.
- Product Vendor: Specifies the vendor or brand of the product.
- Product Title: Provides the name or title of the product.
- Price: Indicates the current price of the product.
- Compare at Price: Displays the original price of the product before any discounts.
- Percentage Off: Calculates and displays the percentage discount applied to the product using JavaScript.
- Color Variant Selector: Allows the user to choose different color variants of the product.
- Size Selector: Enables the user to select different sizes of the product.
- Quantity Selector: Allows the user to choose the quantity of the product to add to the cart.
- Add to Cart Button: A button that adds the selected product to the cart.
- Add to Cart Button Message: Displays a confirmation message when the product is successfully added to the cart.
- Description: Provides a brief description or overview of the product.
-
Use JavaScript to calculate the percentage discount based on the provided price and compare at price.
-
When the "Add to Cart" button is clicked, show a message confirming the addition of the product to the cart with its details.