Hey everyone,
I am building this fashion e-commerce site (used fakestore API) as a side project to retain my knowledge of HTML, CSS and JavaScript while I continue learning react.
Here is the problem, the cart item count doesn’t restart from 0 when I add new items to the cart instead it continues counting from the removed cart items numbers
I checked the element panel of the developer tools and I saw that the items were removed from the cart when i clicked the remove button but the moment I decided to add new items to the cart, the previously removed item get populated back inside cart hence this affect the cart item count.
You should probably put the number of cart items in your state… aka usestate. Remember that just because you remove, you may not be removing from the underlying dom, but the shadow dom that React uses.
Sorry I assumed react since you had used arrow functions everywhere and in a style that looked like react hooks.
Anyways, so turn your attention to getDOMElements where you are adding items to the cart. You have a local variable called cart which is an array that will keep track of the various buttons for adding items into the cart. You create a closure around this cart variable. Meaning that each time one of the buttons are clicked, it is all adding to the same cart (the events are said to “close” around the cart array variable). Which is fine. The problem then comes in your remove where you remove the element from the DOM (inside handleRemoveItem) but next time someone clicks a button to add, you are again reading that cart variable (which still has all the items in it) and those all get added back to the cart plus the recently clicked item.
What you need to do is that when an item is removed in the cart, this cart variable back in getDOMElements is modified and recalculated. You would think it is reset, but because you have events closing around it, it is not. Now this is why too many arrow functions and closures can get a bit complicated because it won’t be easy for you to go back and adjust this cart because it is inside event handlers. To prove this, console.log your cart variable before and after you unshift an item onto it. You will see that the cart never gets updated when you removed an item and so is used to add all the items back to the cart.
My suggestion would be to escalate the cart variable to a higher level that both the getDOMElements function can add to and also that the handleRemoveItem can remove from. This is essentially what a usestate scenario in React would have done for you. The items in your cart is something that is a bit of state information and so many functions will need to see and work with it.
Hopefully you get what I am saying here and sorry for the mistake earlier.
@Martyr2 , thanks for your input… I don’t quite understand this part of your explanation… Did you mean the cart variable let cart = [] shouldn’t be inside the getDOMElements function scope instead it should be a global variable??
Well ideally you don’t want global variables if you can help it, but define it in a way where all functions can access it yes. Also to make sure you adjust it also when you are removing items from the cart. The cart would be your cart items and should match the quantity and items in the cart. Make sense right?
Hello @Martyr2, I passed cartBtn variable inside getDomElements function as an argument to the handleRemoveItem func
My reason: when the remove button is clicked I want to be able to get each unique cartBtn element that was added to that cartarray and pop it from the array to reset the cart quantity
const wrapper = document.querySelector('.cart_items_content');
const items = wrapper.querySelectorAll('.single_cart_item');
items.forEach((item) => {
const removeBtn = item.querySelector('.remove_btn');
removeBtn.addEventListener('click', () => {
const aaa = btn.parentElement.parentElement.parentElement;
item.remove();
cart.pop(cartBtn); //I'm trying to remove the corresponding 'add to cart' btn, which will force the cart to be resetted
handleCartItemCount();
});
});
};
This still doesn’t work tho and that was what I could come up with.
