🛒 Building a Simple “Add to Cart” Functionality with Pure JavaScript

by Tyronne on November 23, 2025

Add to cart ellipse shape red button icon vector. Shopping cart in white background icon.

Adding items to a shopping cart is a foundational feature of any e-commerce site.

While large frameworks like React or Vue handle this beautifully, understanding the core logic with plain JavaScript is crucial.

In this tutorial, we will build a working, in-memory cart using just HTML, CSS (for basic styling), and JavaScript.

🚀 The Three Core Steps

The entire process boils down to these three steps:

HTML Setup: Create the product display and the cart counter.
Data Management (JavaScript): Use an array to store and manage cart items (the data structure).
UI Update (JavaScript): Update the on-screen numbers and details based on the stored data.

Step 1: Setting up the HTML Structure

We need a product to click and a visible counter for the cart. Notice how we use data-attributes on the button to store the product information directly. This is a clean way to pass data from the HTML element to our JavaScript function.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS Cart Tutorial</title>
</head>
<body>

    <h1>Simple E-commerce Example</h1>

    <div id="product-1" style="border: 1px solid #ccc; padding: 15px; margin-bottom: 20px;">
        <h2>The JavaScript Handbook</h2>
        <p>A comprehensive guide to modern JS development.</p>
        <p>Price: <strong>$10.00</strong></p>
        
        <button class="add-to-cart" 
                data-product-id="JSH001" 
                data-product-name="The JavaScript Handbook" 
                data-product-price="10.00">
            Add to Cart
        </button>
    </div>

    <hr>

    <div id="cart-summary">
        <h2>🛍️ Shopping Cart Summary</h2>
        <p>Items in Cart: <strong id="cart-count">0</strong></p>
    </div>

    <script src="cart.js"></script> 
</body>
</html>

Step 2: Initializing the Cart and DOM Elements (cart.js)

In our JavaScript file (cart.js), we first set up the variables we’ll need to work with.

// cart.js

/**
 * 1. The Data Structure
 * This array will hold objects representing items in our cart.
 * Example item structure: { id: "JSH001", name: "...", price: 10.00, quantity: 1 }
 */
let cart = []; 

// 2. DOM Elements
const cartCountElement = document.getElementById('cart-count');
const addToCartButtons = document.querySelectorAll('.add-to-cart');

Step 3: Creating the Core Logic Functions

We need two main functions: one to update the cart data and one to reflect those changes on the screen.

Function 1: `updateCartUI()`

This function calculates the total number of items currently in the cart and updates the display.

// Recalculates the total item count and updates the display
function updateCartUI() {
  // Use the .reduce() method to sum the 'quantity' property of every item in the cart array
  const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
  
  cartCountElement.textContent = totalItems;
  
  // Optional: Log the cart for easy debugging in the console
  console.log('Current Cart State:', cart);
}

Function 2: `addItemToCart()`

This is the central function. It checks if an item is already in the cart. If it is, we just increment the quantity. If it’s new, we add a new item object to the array.

// Handles adding a new item or increasing the quantity of an existing one
function addItemToCart(productId, name, price) {
  // Check if item already exists by searching its ID
  const existingItemIndex = cart.findIndex(item => item.id === productId);

  if (existingItemIndex > -1) {
    // 1. Item exists: Increment its quantity
    cart[existingItemIndex].quantity += 1;
  } else {
    // 2. Item is new: Add a new object to the cart array
    cart.push({
      id: productId,
      name: name,
      price: parseFloat(price), // Important: Convert string price to a number
      quantity: 1
    });
  }

  // After every change to the data, update the display!
  updateCartUI();
}

Step 4: Attaching the Event Listener

The final step is to listen for clicks on our buttons and call the addItemToCart function, pulling the product data from the button’s data-attributes.

// Loop through all buttons and attach a click event listener
addToCartButtons.forEach(button => {
  button.addEventListener('click', () => {
    // Extract data from the clicked button
    const productId = button.dataset.productId;
    const productName = button.dataset.productName;
    const productPrice = button.dataset.productPrice;

    // Call the core logic
    addItemToCart(productId, productName, productPrice);
  });
});

// Run this once when the script loads to initialize the count to '0'
updateCartUI();

🎉 Conclusion and Next Steps

You now have a functional “Add to Cart” button! Click it, and you’ll see the count update instantly.

🌟 Challenge: Making the Cart Persistent

Currently, if you refresh the page, the cart array resets to empty.

In a real-world application, you need the cart to persist.

Your next step should be integrating localStorage to save the cart array data between page loads.

Useful links below:

Let me & my team build you a money making website/blog for your business https://bit.ly/tnrwebsite_service

Get Bluehost hosting for as little as $1.99/month (save 75%)…https://bit.ly/3C1fZd2

Best email marketing automation solution on the market! http://www.aweber.com/?373860

Build high converting sales funnels with a few simple clicks of your mouse! https://bit.ly/484YV29

Join my Patreon for one-on-one coaching and help with your coding…https://www.patreon.com/c/TyronneRatcliff

Buy me a coffee https://buymeacoffee.com/tyronneratcliff