${product.isNew ? 'YANGI' : ''}
${product.discount > 0 ? `-${product.discount}%` : ''}
${CATEGORIES[product.category]?.name || product.category}
${product.name}
${getStarsHTML(product.rating)}
(${product.reviewCount})
${formatPrice(product.price)}
${product.oldPrice ? `${formatPrice(product.oldPrice)}` : ''}
`;
card.addEventListener('click', () => {
window.location.href = `product.html?id=${product.id}`;
});
return card;
}
function handleWishlist(id, btn) {
toggleWishlist(id);
const wishlisted = isInWishlist(id);
btn.classList.toggle('wishlisted', wishlisted);
btn.innerHTML = wishlisted ? ICONS.heartFill : ICONS.heart;
showToast(wishlisted ? 'Sevimlilarga qo\'shildi' : 'Sevimlilardan olib tashlandi', '', wishlisted ? 'success' : 'info');
}
function quickAddToCart(id, event) {
id = parseInt(id);
const product = getProductById(id);
if (!product) return;
addToCart(id, product.sizes[0], product.colors[0], 1);
updateCartBadge();
showToast('Savatga qo\'shildi', product.name, 'success');
if (event) {
const btn = event.currentTarget || event.target;
let img = btn.closest('.product-card')?.querySelector('img') || btn.closest('.modal')?.querySelector('img') || document.querySelector('#mainImage');
if (img) flyToCart(img);
}
}
function flyToCart(imgElement) {
if (!imgElement) return;
const cartIcon = document.getElementById('navCartBtn');
if (!cartIcon) return;
const imgClone = imgElement.cloneNode(true);
const rect = imgElement.getBoundingClientRect();
const cartRect = cartIcon.getBoundingClientRect();
imgClone.className = 'flying-img';
imgClone.style.top = rect.top + 'px';
imgClone.style.left = rect.left + 'px';
imgClone.style.width = rect.width + 'px';
imgClone.style.height = rect.height + 'px';
document.body.appendChild(imgClone);
requestAnimationFrame(() => {
requestAnimationFrame(() => {
imgClone.style.top = cartRect.top + 'px';
imgClone.style.left = cartRect.left + 'px';
imgClone.style.width = '20px';
imgClone.style.height = '20px';
imgClone.style.opacity = '0';
imgClone.style.transform = 'scale(0.5)';
});
});
setTimeout(() => {
imgClone.remove();
cartIcon.classList.add('bump');
setTimeout(() => cartIcon.classList.remove('bump'), 300);
}, 700);
}
// ========================================
// INTERSECTION OBSERVER FOR ANIMATIONS
// ========================================
function initRevealAnimations() {
// Convert old manual reveals to AOS targets
document.querySelectorAll('.reveal').forEach((el, index) => {
if (!el.hasAttribute('data-aos')) {
el.setAttribute('data-aos', 'fade-up');
el.setAttribute('data-aos-delay', (index % 4) * 100);
el.classList.remove('reveal');
}
});
// Automatically add stagger effects for product grids
document.querySelectorAll('.stagger').forEach(grid => {
Array.from(grid.children).forEach((child, idx) => {
if (!child.hasAttribute('data-aos')) {
child.setAttribute('data-aos', 'fade-up');
child.setAttribute('data-aos-delay', (idx % 8) * 100);
}
});
});
if (typeof AOS !== 'undefined') {
AOS.refreshHard();
}
}
// ========================================
// QUICK VIEW MODAL
// ========================================
function openQuickView(id) {
const product = getProductById(id);
if (!product) return;
trackRecentlyViewed(id);
let overlay = document.getElementById('quickViewOverlay');
if (!overlay) {
overlay = document.createElement('div');
overlay.className = 'modal-overlay';
overlay.id = 'quickViewOverlay';
overlay.addEventListener('click', (e) => { if (e.target === overlay) closeQuickView(); });
document.body.appendChild(overlay);
}
const wishlisted = isInWishlist(product.id);
overlay.innerHTML = `