I'm working on an e-commerce shop and im having a problem updating the Quantity of the products in the Cart Page. (for example, when someone adds more than one product in the quantity label, that number should be added in the Cart Page and the Total Price should be calculated with that quantity of the products). I've created a SideCart that pops up from the right side. Every help is welcomed!!
const cartButton = document.getElementById('cart-button');
const cart = document.querySelector('.cart');
const cartItems = document.getElementById('cart-items');
const cartTotal = document.getElementById('cart-total');
const addButtons = document.querySelectorAll('.add-to-cart');
let cartItemsArray = [];
function renderCartItems() {
cartItems.innerHTML = '';
cartItemsArray.forEach(item => {
const li = document.createElement('li');
li.innerHTML = `
<img src="${item.image}" alt="${item.name}">
<span>${item.name} x ${item.quantity}</span>
<span>$${item.price * item.quantity}</span>
`;
cartItems.appendChild(li);
});
cartTotal.textContent = calculateCartTotal();
}
function calculateCartTotal() {
let total = 0;
cartItemsArray.forEach(item => {
total += item.price * item.quantity;
});
return total.toFixed(2);
}
function addToCart(name, price, image) {
const existingItem = cartItemsArray.find(item => item.name === name);
if (existingItem) {
existingItem.quantity++;
} else {
cartItemsArray.push({ name, price, image, quantity: 1 });
}
renderCartItems();
}
cartButton.addEventListener('click', () => {
cart.classList.toggle('show');
});
addButtons.forEach(button => {
const name = button.getAttribute('data-name');
const price = button.getAttribute('data-price');
const image = button.parentNode.querySelector('img').getAttribute('src');
button.addEventListener('click', () => {
addToCart(name, price, image);
});
});<div class="container">
<button id="cart-button">Cart</button>
<div class="products">
<div class="product">
<img src="./vision_red_front.png" alt="Product 1">
<h3>Product 1</h3>
<p>Price: $10</p>
<div class="quantity">
<span class="quantity">quantity : </span>
<input type="number" id="num" class="quantity" oninput="calc()" min="1" max="1000" value="1" />
</div>
<button id="cart-button" class="add-to-cart" data-name="Product 1" data-price="10">Add to Cart</button>
</div>
<div class="product">
<img src="./vision_red_front.png" alt="Product 2">
<h3>Product 2</h3>
<p>Price: $20</p>
<label for="product1-quantity">Quantity:</label>
<input type="number" id="product1-quantity" class="product-quantity" value="1">
<button class="add-to-cart" data-name="Product 2" data-price="20">Add to Cart</button>
</div>
</div>
<div class="cart">
<h3>Cart</h3>
<ul id="cart-items"></ul>
<p>Total: $<span id="cart-total">0</span></p>
<a href="#"><button class="checkout" id="checkout"> Checkout</button></a>
</div>
</div>You need to access the value of the input when the button is pressed, so you need to pass a reference to button.parentNode.querySelector('input') when addToCart is called. The properties can then be read by JavaScript.
Although the attributes are numbers, the value property is a string, so use parseInt to get a number.
existingItem.quantity+=parseInt(q.value);
const cartButton = document.getElementById('cart-button');
const cart = document.querySelector('.cart');
const cartItems = document.getElementById('cart-items');
const cartTotal = document.getElementById('cart-total');
const addButtons = document.querySelectorAll('.add-to-cart');
let cartItemsArray = [];
function renderCartItems() {
cartItems.innerHTML = '';
cartItemsArray.forEach(item => {
const li = document.createElement('li');
li.innerHTML = `
<img src="${item.image}" alt="${item.name}">
<span>${item.name} x ${item.quantity}</span>
<span>$${item.price * item.quantity}</span>
`;
cartItems.appendChild(li);
});
cartTotal.textContent = calculateCartTotal();
}
function calculateCartTotal() {
let total = 0;
cartItemsArray.forEach(item => {
total += item.price * item.quantity;
});
return total.toFixed(2);
}
function addToCart(name, price, image, q) {
const existingItem = cartItemsArray.find(item => item.name === name);
if (existingItem) {
existingItem.quantity+=parseInt(q.value);
} else {
cartItemsArray.push({ name, price, image, quantity: 1 });
}
renderCartItems();
}
cartButton.addEventListener('click', () => {
cart.classList.toggle('show');
});
addButtons.forEach(button => {
const name = button.getAttribute('data-name');
const price = button.getAttribute('data-price');
const image = button.parentNode.querySelector('img').getAttribute('src');
const quantity = button.parentNode.querySelector('input');
button.addEventListener('click', () =>
{addToCart(name, price, image, quantity);}
);
});<div class="container">
<button id="cart-button">Cart</button>
<div class="products">
<div class="product">
<img src="./vision_red_front.png" alt="Product 1">
<h3>Product 1</h3>
<p>Price: $10</p>
<div class="quantity">
<span class="quantity">quantity : </span>
<input type="number" min=1 max=100 value=1 />
</div>
<button id="cart-button" class="add-to-cart" data-name="Product 1" data-price="10">Add to Cart</button>
</div>
<div class="product">
<img src="./vision_red_front.png" alt="Product 2">
<h3>Product 2</h3>
<p>Price: $20</p>
<label for="product1-quantity">Quantity:</label>
<input type="number" id="product1-quantity" class="product-quantity" value="1">
<button class="add-to-cart" data-name="Product 2" data-price="20">Add to Cart</button>
</div>
</div>
<div class="cart">
<h3>Cart</h3>
<ul id="cart-items"></ul>
<p>Total: $<span id="cart-total">0</span></p>
<a href="#"><button class="checkout" id="checkout"> Checkout</button></a>
</div>
</div>