Add To Cart Html Css Javascript Template

MUAZHAN

6 min read

·

Jun 22, 2024

40

Share

Add to Cart HTML, CSS, and JavaScript Template

This article will guide you through creating a simple yet functional "Add to Cart" template using HTML, CSS, and JavaScript. This template provides a basic structure for an e-commerce website and can be customized to fit your specific needs.

HTML Structure

The HTML structure of the template is straightforward and contains the essential elements for displaying products and adding them to the cart.

    
    
    
    


    

        
        
Product Name
        
Product Description
        
$19.99
        Add to Cart
    

    

        
Shopping Cart
        

            
        
        
Total: $0.00
    

    

Explanation:

• product div: Contains the product details like image, name, description, price, and the "Add to Cart" button.
• cart div: Represents the shopping cart, containing the "Shopping Cart" heading, the cart-items div where items will be displayed, and the total price.
• cart-items div: Will be populated with the added items by JavaScript.
• add-to-cart button: Triggers the "Add to Cart" functionality when clicked.

CSS Styling

You can customize the appearance of your template using CSS. Here's a basic example:

body {
    font-family: sans-serif;
}

.product {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 20px;
    width: 300px;
}

.product img {
    width: 100%;
    height: auto;
}

.add-to-cart {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.cart {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 20px;
    width: 300px;
}

.cart-items {
    /* Style for cart items */
}

This CSS provides basic styling for the product and cart elements. You can further adjust the styles to match your website's design.

JavaScript Functionality

JavaScript is crucial for handling the "Add to Cart" functionality. Here's an example of how to implement it:

const addButtons = document.querySelectorAll('.add-to-cart');
const cartItems = document.querySelector('.cart-items');
const totalElement = document.querySelector('.total');

let cart = [];
let total = 0;

addButtons.forEach(button => {
    button.addEventListener('click', () => {
        const product = {
            name: button.parentElement.querySelector('h3').textContent,
            price: parseFloat(button.parentElement.querySelector('.price').textContent.replace('