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();
Thanks, I found the reason, replaced this part;
with this:
Still didn't work, then figured out that semicolon there and replaced it with comma. And now it works perfect.