Как получить 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 удаленного продукта, а следующего за ним по счето если удален первый элемент из корзины. В общем не работае.

Может кто-то знает как правильно "отлавливать" данные удаляемых из миникорзины элементов.


Ответы (0 шт):