JS addToCart and addToFavs not working same time

56 Views Asked by At

I have a product gallery page where I want to enable two options, when clicked on fav button, fav counter gets +1, and when clicked on cart button, cart counter gets +1 value.. When I do it for only addToCart function, it works fine, but when I add a new function, adding to favs, it does not display the grids, only the grid loader shows up.. Here is my HTML mark up

<div>
    <button class="aka-fav">
        <i class="aka-fav-icon fa fa-heart-o"></i>
        <span class="aka-text-hidden">Favoriler</span>
        <span class="aka-fav-count">0</span>
    </button>
    <button class="aka-cart">
        <i class="aka-cart-icon fa fa-shopping-cart"></i>
        <span class="aka-text-hidden">Sepet</span>
        <span class="aka-cart-count">0</span>
    </button>
</div>

And JS is here

        // filter ctrls
        filterCtrls = [].slice.call(document.querySelectorAll('.aka-filter > .aka-fav')),
        // fav
        fav = document.querySelector('.aka-fav'),
        favItems = fav.querySelector('.aka-fav-count');

        filterCtrls = [].slice.call(document.querySelectorAll('.aka-filter > .aka-buy')),
        // cart
        cart = document.querySelector('.aka-cart'),
        cartItems = cart.querySelector('.aka-cart-count');
      -------
      -------
      -------
      -------
      function initEvents() {
        filterCtrls.forEach(function(filterCtrl) {
            filterCtrl.addEventListener('click', function() {
                classie.remove(filterCtrl.parentNode.querySelector('.aka-filter-item-selected'), 'aka-filter-item-selected');
                classie.add(filterCtrl, 'aka-filter-item-selected');
                iso.arrange({
                    filter: filterCtrl.getAttribute('data-filter')
                });
                recalcFlickities();
                iso.layout();
            });
        });

        // window resize / recalculate sizes for both flickity and isotope/masonry layouts
        window.addEventListener('resize', throttle(function(ev) {
            recalcFlickities()
            iso.layout();
        }, 50));

        [].slice.call(grid.querySelectorAll('.aka-grid-item')).forEach(function(item) {
        // add to favlist
            item.querySelector('.aka-action-fav').addEventListener('click', addToFav);
        // add to cart
            item.querySelector('.aka-action-buy').addEventListener('click', addToCart);
        });
    }

    function addToFav() {
        classie.add(fav, 'aka-fav-animate');
        setTimeout(function() {favItems.innerHTML = Number(favItems.innerHTML) + 1;}, 200);
        onEndAnimation(favItems, function() {
            classie.remove(fav, 'aka-fav-animate');
        });
    }

    function addToCart() {
        classie.add(cart, 'aka-cart-animate');
        setTimeout(function() {cartItems.innerHTML = Number(cartItems.innerHTML) + 1;}, 200);
        onEndAnimation(cartItems, function() {
            classie.remove(cart, 'aka-cart-animate');
        });
    }

    function recalcFlickities() {
        for(var i = 0, len = flkties.length; i < len; ++i) {
            flkties[i].resize();
        }
    }

    init();
1

There are 1 best solutions below

0
On BEST ANSWER

Thanks, I found the reason, replaced this part;

// filter ctrls
        filterCtrls = [].slice.call(document.querySelectorAll('.aka-filter > .aka-fav')),
        // fav
        fav = document.querySelector('.aka-fav'),
        favItems = fav.querySelector('.aka-fav-count');

        filterCtrls = [].slice.call(document.querySelectorAll('.aka-filter > .aka-buy')),
        // cart
        cart = document.querySelector('.aka-cart'),
        cartItems = cart.querySelector('.aka-cart-count');

with this:

// filter ctrls
            filterCtrls = [].slice.call(document.querySelectorAll('.aka-filter > .aka-fav')),
            // fav
            fav = document.querySelector('.aka-fav'),
            favItems = fav.querySelector('.aka-fav-count');
            // cart
            cart = document.querySelector('.aka-cart'),
            cartItems = cart.querySelector('.aka-cart-count');

Still didn't work, then figured out that semicolon there and replaced it with comma. And now it works perfect.

favItems = fav.querySelector('.aka-fav-count'), //this semicolon to comma
                // cart
                cart = document.querySelector('.aka-cart'),