Как получить ID удаляемого из мини-корзины продукта (WooCommerce)
При удалении продукта из миникорзины мне нужно получить его ID и записать в локальное хранилище браузера. Я попробовал два варианта. Но ни один из них не работает правильно. Сначала я написал во этот код:
jQuery(document.body).on('removed_from_cart', function () {
//В эту переменную я пытаюсь записать данные о кнопке remove
let removeFromCartButton = document.querySelectorAll('.remove_from_cart_button');
removeFromCartButton.forEach(item=>{
item.addEventListener('click', function(){
const addToCartAtr = addToCartButton.getAttribute('data-product_id');
const productInCart = document.querySelector('.product-in-cart');
// в эту переменную записываю значение ID которое "беру" из атрибута кнупки удалить
let remoProdId = item.getAttribute('data-product_id');
let remProdArr = JSON.parse(localStorage.getItem('remProdArr')) || [];
remProdArr.push(remoProdId);
localStorage.setItem("remProdArr", JSON.stringify(remProdArr));
if(remProdArr.includes(addToCartAtr)){
productInCart.innerHTML = ""
}
});
});
})
Проблема в том, что этот код не отрабытавал как нужно. Например я добавляю в корзину пять продуктов. Потом хочу удалить один из них. Нажимаю кнопку удалить - продук удаляется. Но его ID никуда не приходит и только если я надумаю удалить еще один продукт все работает. Но стоит только перезагрузить страницу, все начинается сначала - удаляешь первый элемент ID первого удаленного продукта ни куда не приходит, дальше все работает и так по кругу.
Пучему так происходит разобрался: проблема в том, что массив еллементов: removeFromCartButton формируется не в момент удаления первого элемента, а после. Следовательно первый удаленный элемент в него не попадает. А дальше, до перезагрузки страницы все работает как надо. Тогда я убрал событие клик. И вот что вышло:
jQuery(document.body).on('removed_from_cart', function() {
let removeFromCartButton = document.querySelectorAll('.remove_from_cart_button');
removeFromCartButton.forEach(item=>{
const addToCartAtr = addToCartButton.getAttribute('data-product_id');
const productInCart = document.querySelector('.product-in-cart');
let remProdArr = JSON.parse(localStorage.getItem('remProdArr')) || [];
let remoProdId = item.getAttribute('data-product_id');
remProdArr.push(remoProdId);
localStorage.setItem("remProdArr", JSON.stringify(remProdArr));
if(remProdArr.includes(addToCartAtr)){
productInCart.innerHTML = ""
}
})
});
И это вообще не вариант. В этом случае запись в локальное хранилище происходит при удалении первого элемента, это да. Но записывается не ID удаленного продукта, а следующего за ним по счето если удален первый элемент из корзины. В общем не работае.
Может кто-то знает как правильно "отлавливать" данные удаляемых из миникорзины элементов.