Cart Item Card with Quantity Controls

Build a functional shopping cart page with this interactive card for displaying items and managing quantities.

This component is a crucial part of any e-commerce checkout flow. It presents product details in a compact, horizontal format and includes accessible controls for increasing, decreasing, and removing items from the cart.

Screenshot of two shopping cart item cards with quantity adjustment buttons.

Get Source Code Preview

About this Component

This is an interactive component powered by a small amount of dependency-free JavaScript. It's designed to provide the core functionality required for each line item in a shopping cart (viewing the item, changing its quantity, and removing it).

Features

Functional Quantity Controls: The "plus" and "minus" buttons are fully functional and will adjust the quantity in the input field.
Accessible Controls: The buttons and input field include proper aria-label attributes to ensure they are understandable by assistive technologies.
Lightweight JavaScript: The interactivity is powered by a small snippet of vanilla JavaScript with no external dependencies. The script is written to manage multiple cart items on a single page.
Responsive Layout: The horizontal layout adapts cleanly on smaller screens.

Code Breakdown

HTML Structure

Each cart item is an article tag with the class .cic-card. The main card is a flex container with three primary sections: a wrapper for the image, a central block for the product details (.cic-details), and a right-aligned block for the actions and price (.cic-actions). The quantity controls are a set of button and input elements grouped together within their own container.

JavaScript Logic

The script selects all cart item cards on the page and iterates through them. For each card, it finds the "plus", "minus", and "remove" buttons, along with the quantity input field. It then attaches click event listeners to each button. The "plus" and "minus" button listeners update the value of the input field, ensuring it doesn't go below the specified min value or above the max value. The "remove" button listener, for demonstration purposes, removes the entire card element from the page.

Code

Here is the complete, self-contained code. In a real-world application, you would extend the JavaScript to also make API calls to update the cart on your server whenever a quantity is changed or an item is removed.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Container for the list */
.cart-list-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    display: grid;
    gap: 1.5rem;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* === Cart Item Card Styles === */
.cic-card {
    display: flex;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}
.cart-list-container > .cic-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cic-image-wrapper {
    flex-shrink: 0;
}
.cic-image {
    width: 112px;
    height: 112px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* Main info column */
.cic-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.cic-title {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}
.cic-attributes {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0.25rem 0;
}

/* Actions and Price column */
.cic-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 0.5rem;
}
.cic-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
}

/* Quantity controls styling */
.cic-quantity-control {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    margin-top: auto; /* Pushes to the bottom */
}
.cic-quantity-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
}
.cic-quantity-btn:hover svg {
    color: #4f46e5;
}
.cic-quantity-btn svg {
    width: 16px;
    height: 16px;
    color: #6b7280;
    transition: color 0.2s ease;
}
.cic-quantity-input {
    width: 40px;
    border: none;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.25rem 0;
    appearance: textfield; /* Hides default number input arrows */
}
/* For Firefox */
.cic-quantity-input[type=number] {
  -moz-appearance: textfield;
}

/* For Chrome, Safari, and Opera */
.cic-quantity-input::-webkit-outer-spin-button,
.cic-quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cic-remove-btn {
    font-size: 0.8rem;
    color: #ef4444;
    text-decoration: none;
}
.cic-remove-btn:hover {
    text-decoration: underline;
}

@media (max-width: 500px) {
    .cic-card {
        position: relative;
    }
    .cic-details {
        flex-grow: 1;
    }
    .cic-actions {
        position: absolute;
        top: 1.5rem;
        right: 0;
        align-items: flex-end;
        background: #fff;
    }
    .cic-quantity-control {
        margin-top: 2.25rem;
    }
}
</style>

<div class="cart-list-container">

<article class="cic-card" data-id="p1">
        <div class="cic-image-wrapper">
            <img src="https://placehold.co/224x224/8b5cf6/ffffff/png?text=Blanket" alt="A soft, woven linen throw blanket." class="cic-image">
        </div>
        <div class="cic-details">
            <h3 class="cic-title">Linen Throw Blanket</h3>
            <p class="cic-attributes">Color: Indigo / Size: One Size</p>
            <div class="cic-quantity-control">
                <button class="cic-quantity-btn minus-btn" type="button" aria-label="Decrease quantity"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M3.75 7.25a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z" /></svg></button>
                <input class="cic-quantity-input" type="number" value="1" min="1" max="10" aria-label="Item quantity">
                <button class="cic-quantity-btn plus-btn" type="button" aria-label="Increase quantity"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M8.75 3.75a.75.75 0 00-1.5 0v3.5h-3.5a.75.75 0 000 1.5h3.5v3.5a.75.75 0 001.5 0v-3.5h3.5a.75.75 0 000-1.5h-3.5v-3.5z" /></svg></button>
            </div>
        </div>
        <div class="cic-actions">
            <p class="cic-price">$79.00</p>
            <a href="#" class="cic-remove-btn">Remove</a>
        </div>
    </article>

<article class="cic-card" data-id="p2">
        <div class="cic-image-wrapper">
            <img src="https://placehold.co/224x224/f43f5e/ffffff/png?text=Mugs" alt="A set of handcrafted ceramic mugs." class="cic-image">
        </div>
        <div class="cic-details">
            <h3 class="cic-title">Artisan Ceramic Mug Set</h3>
            <p class="cic-attributes">Set of 4</p>
             <div class="cic-quantity-control">
                <button class="cic-quantity-btn minus-btn" type="button" aria-label="Decrease quantity"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M3.75 7.25a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z" /></svg></button>
                <input class="cic-quantity-input" type="number" value="2" min="1" max="10" aria-label="Item quantity">
                <button class="cic-quantity-btn plus-btn" type="button" aria-label="Increase quantity"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M8.75 3.75a.75.75 0 00-1.5 0v3.5h-3.5a.75.75 0 000 1.5h3.5v3.5a.75.75 0 001.5 0v-3.5h3.5a.75.75 0 000-1.5h-3.5v-3.5z" /></svg></button>
            </div>
        </div>
        <div class="cic-actions">
            <p class="cic-price">$90.00</p>
            <a href="#" class="cic-remove-btn">Remove</a>
        </div>
    </article>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const cartItems = document.querySelectorAll('.cic-card');

cartItems.forEach(card => {
        const minusBtn = card.querySelector('.minus-btn');
        const plusBtn = card.querySelector('.plus-btn');
        const quantityInput = card.querySelector('.cic-quantity-input');
        const removeBtn = card.querySelector('.cic-remove-btn');
        const min = parseInt(quantityInput.min, 10);
        const max = parseInt(quantityInput.max, 10);

minusBtn.addEventListener('click', () => {
            let currentValue = parseInt(quantityInput.value, 10);
            if (currentValue > min) {
                quantityInput.value = currentValue - 1;
            }
        });

plusBtn.addEventListener('click', () => {
            let currentValue = parseInt(quantityInput.value, 10);
            if (currentValue < max) {
                quantityInput.value = currentValue + 1;
            }
        });
        
        removeBtn.addEventListener('click', (e) => {
            e.preventDefault();
            // In a real application, you would make an API call to remove the item from the cart.
            // For this demo, we'll just remove the element from the DOM.
            card.remove();
        });
    });
});
</script>

View Output