Magento 2 - Get cart item qty change in Javascript

Question

I have a javascript file that loads when the page loads. This file defines two variables (one for the shopping cart items and one for the count).

This script also contains a subscribe that fires whenever the cart is updated.

When I add items to the cart, remove items from the cart or update the cart, this subscribe is hit and I am able to execute logic inside there.

This is fine for most however when a user changes the qty of an item in the cart, I can never get the previous qty.

var cart = customerData.get('cart');
 // Define variables to check against inside the subscribe
 var count = cart().summary_count;
 var currentItems = [...cart().items];
 // Watch the cart
 cart.subscribe(function () {
 // If the count has changed
 if (cart().summary_count !== count) { 
 for(let i =0; i < cart().summary_count; i++){
 var foundItem = currentItems.find(x => x.product_id == cart().items[i].product_id);
 var currentItem = cart().items[i];
 // Both of these values are the same
 if(foundItem.qty < currentItem.qty){
 var qtyChange = currentItem.qty - foundItem.qty;
 }
 }
 }
 // Set the count to the new value
 count = cart().summary_count;
 // Set the new currentItems array
 currentItems = cart().items;
 });

The cart().summary_count updates but the qty against the item updates in both the duplicated items array defined outside the subscribe as well as the cart().items array (which I'd expect).

I have noticed that the value for qty in the array defined outside the subscribe changes to a string and the cart().items version of the qty is an int.

Below is a screenshot of what I am seeing in dev tools. I have updated the qty in the cart for item_id 269

screenshot of devtools

Am I missing something here?

Answer 1

• The problem appears to be with the data type of the qty attribute in the currentItems array. When you receive the qty value from foundItem, it is regarded as a string, whereas it is treated as an integer in currentItem.
• To fix this, change the quantity value to an integer before conducting the comparison.

Check this code,

 var cart = customerData.get('cart');
// Define variables to check against inside the subscribe
var count = cart().summary_count;
var currentItems = [...cart().items];
// Watch the cart
cart.subscribe(function () {
 // If the count has changed
 if (cart().summary_count !== count) { 
 for (let i = 0; i < cart().summary_count; i++) {
 var foundItem = currentItems.find(x => x.product_id === cart().items[i].product_id);
 var currentItem = cart().items[i];
 // Convert qty values to integers
 var foundItemQty = parseInt(foundItem.qty, 10);
 var currentItemQty = currentItem.qty;
 if (foundItemQty < currentItemQty) {
 var qtyChange = currentItemQty - foundItemQty;
 // Perform logic with qtyChange
 }
 }
 }
 // Set the count to the new value
 count = cart().summary_count;
 // Set the new currentItems array
 currentItems = cart().items;
});

• JamesS: My question is tho. The value for qty in the array defined outside the subscribe (currentItems) updates to the new qty value. This array is only declared on page load. It means that when I am comparing the values, they are the same. I expected the array declared outside the susbcribe to retain the old qty until I set that array to the new array (shown in the last line of the code snippet)