0
У меня есть страница галереи продуктов, где я хочу включить две опции, когда нажата кнопка fav, fav-счетчик получает +1, а при нажатии на кнопку тележки счетчик корзин получает +1 значение .. Когда я делаю это только для функции addToCart, он отлично работает, но когда я добавляю новую функцию, добавляя в favs, она не отображает сетки, появляется только загрузчик сетки. Вот мой HTML-код вверхJS addToCart и addToFavs не работают одновременно
<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>
И JS здесь
// 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();