Add To Cart Functionality Html Css Javascript

MUAZHAN

5 min read

·

Jun 22, 2024

45

Share

Add to Cart Functionality with HTML, CSS, and JavaScript

This article will guide you through creating a basic "Add to Cart" functionality using HTML, CSS, and JavaScript. We'll create a simple e-commerce page with a product, a button to add it to the cart, and a cart section to display the added items.

1. HTML Structure

First, let's create the basic HTML structure for our product and cart:

    
    
    
    


    

        
        
Product Name
        
Product Description
        Add to Cart
    

    

        
Shopping Cart
        

            
        Checkout
    

    

In this code:

• We have a product div containing an image, product name, description, and the "Add to Cart" button with the id addToCart.
• We have a cart div with a heading, an empty unordered list (cartItems), and a "Checkout" button with the id checkout.

2. CSS Styling (style.css)

Let's add some basic styling to make our page look presentable:

.product {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 20px;
    text-align: center;
}

.product img {
    max-width: 200px;
    height: auto;
}

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

#cartItems li {
    list-style-type: none;
    margin-bottom: 10px;
}

Feel free to customize this CSS according to your design preferences.

3. JavaScript Functionality (script.js)

Now, let's add the JavaScript to handle the "Add to Cart" functionality:

const addToCartButton = document.getElementById('addToCart');
const cartItemsList = document.getElementById('cartItems');

addToCartButton.addEventListener('click', () => {
    const cartItem = document.createElement('li');
    cartItem.textContent = 'Product Name'; // Replace with actual product name
    cartItemsList.appendChild(cartItem);
});

In this script:

• We select the "Add to Cart" button and the cart items list using their IDs.
• We add an event listener to the button that triggers a function when clicked.
• Inside the function, we create a new list item (li) and set its text content to the product name.
• We append this newly created list item to the cartItemsList.

4. Expanding Functionality

This is a very basic implementation. You can expand it by:

• Adding product details to the cart: Instead of just the name, store and display additional details like price, quantity, etc.
• Implementing quantity control: Allow users to adjust the quantity of each item in the cart.
• Updating cart total: Calculate and display the total price of all items in the cart.
• Persisting cart data: Store cart data in local storage or a database to retain it even after the page is refreshed.
• Checkout functionality: Implement a checkout process, integrating with payment gateways.

Conclusion

This guide provides a basic introduction to implementing "Add to Cart" functionality using HTML, CSS, and JavaScript. By building on this foundation, you can create a more robust and feature-rich shopping cart experience for your website. Remember, this is just a starting point; explore more advanced techniques and libraries to enhance your implementation further.