static/js/script.js - main - lelinna/cafe

static/js/script.js
202 строки7 KB
Younaaaaaaaaa
Add files via upload
10 май 2026, 20:45
10 май 2026, 20:452f459ed
let cart = JSON.parse(localStorage.getItem('cart')) || [];

document.addEventListener('DOMContentLoaded', () => {
    updateCartUI();
    
    if (document.getElementById('cartPageContainer')) {
        renderCartPage();
    }
});


function addToCart(btn) {
    btn.classList.add('clicked');
    let originalText = btn.innerText;
    btn.innerText = "✓";
    btn.style.background = "#4CAF50";
    btn.style.color = "white";

    let id = btn.getAttribute('data-id');
    let name = btn.getAttribute('data-name');
    let price = parseInt(btn.getAttribute('data-price'));
    
    let img = null;
    let desc = btn.getAttribute('data-desc') || '';
    let cals = btn.getAttribute('data-cals') || '';
    
    if (btn.closest && btn.closest('.product-card')) {
        let card = btn.closest('.product-card');
        let imgEl = card.querySelector('img');
        if (imgEl) img = imgEl.src;
        if (!desc) desc = card.getAttribute('data-desc') || '';
        if (!cals) cals = card.getAttribute('data-cals') || '';
    }

    let existingItem = cart.find(item => item.id === id);
    if (existingItem) {
        existingItem.quantity += 1;
    } else {
        cart.push({ id, name, price, img, desc, cals, quantity: 1 });
    }
    
    saveCart();
    updateCartUI();

    setTimeout(() => {
        btn.innerText = originalText;
        btn.style.background = "";
        btn.style.color = "";
        btn.classList.remove('clicked');
    }, 1200);
}

let itemToRemoveId = null;

function changeQuantity(id, change) {
    let item = cart.find(i => i.id === id);
    if (item) {
        if (item.quantity + change <= 0) {
            openRemoveModal(id);
        } else {
            item.quantity += change;
            saveCart();
            renderCartPage();
            updateCartUI();
        }
    }
}

function openRemoveModal(id) {
    itemToRemoveId = id;
    document.getElementById('confirmRemoveOverlay').classList.add('open');
}

document.addEventListener('DOMContentLoaded', () => {
    const btnConfirmRemove = document.getElementById('btnConfirmRemove');
    if (btnConfirmRemove) {
        btnConfirmRemove.addEventListener('click', () => {
            if (itemToRemoveId) {
                cart = cart.filter(item => item.id !== itemToRemoveId);
                saveCart();
                renderCartPage();
                updateCartUI();
            }
            closeConfirmModal('confirmRemoveOverlay');
        });
    }
});

function openClearCartModal() {
    if (cart.length > 0) {
        document.getElementById('confirmClearOverlay').classList.add('open');
    }
}

function executeClearCart() {
    cart = [];
    saveCart();
    renderCartPage();
    updateCartUI();
    closeConfirmModal('confirmClearOverlay');
}

function closeConfirmModal(overlayId) {
    document.getElementById(overlayId).classList.remove('open');
}


function saveCart() {
    localStorage.setItem('cart', JSON.stringify(cart));
}

function updateCartUI() {
    let total = cart.reduce((acc, item) => acc + (item.price * item.quantity), 0);
    
    const floatBtn = document.getElementById('cartBtn');
    if (floatBtn) {
        if (cart.length > 0) {
            document.getElementById('cartTotal').innerText = total + ' ₽';
            floatBtn.style.display = 'flex';
        } else {
            floatBtn.style.display = 'none';
        }
    }

    const menuPriceBadge = document.getElementById('menuCartPrice');
    if (menuPriceBadge) {
        if (total > 0) {
            menuPriceBadge.style.display = 'inline-block';
            menuPriceBadge.innerText = total + ' ₽';
        } else {
            menuPriceBadge.style.display = 'none';
        }
    }
}

function renderCartPage() {
    const container = document.getElementById('cartItemsList');
    const emptyState = document.getElementById('emptyCartState');
    const fullState = document.getElementById('fullCartState');
    const bottomBtn = document.getElementById('cartBottomBtn');
    const bottomTotal = document.getElementById('cartBottomTotal');

    if (!container) return;

    if (cart.length === 0) {
        emptyState.style.display = 'flex';
        fullState.style.display = 'none';
        bottomBtn.style.display = 'none';
    } else {
        emptyState.style.display = 'none';
        fullState.style.display = 'block';
        bottomBtn.style.display = 'block';

        let total = 0;
        container.innerHTML = '';
        
        cart.forEach(item => {
            total += item.price * item.quantity;
            
            let imgSrc = item.img;
            if (!imgSrc || imgSrc === 'null' || imgSrc.includes('undefined')) {
                imgSrc = 'https://via.placeholder.com/150/f0f0f0/999?text=Фото';
            }

            let safeName = item.name ? item.name.replace(/'/g, "\\'").replace(/"/g, '&quot;') : '';
            let safeDesc = item.desc ? item.desc.replace(/'/g, "\\'").replace(/"/g, '&quot;').replace(/\n/g, ' ') : '';
            let safeCals = item.cals ? String(item.cals).replace(/'/g, "\\'") : '0';

            let modalCall = `openProductModal('${item.id}', '${safeName}', ${item.price}, '${safeDesc}', '${imgSrc}', '${safeCals}')`;

            let div = document.createElement('div');
            div.className = 'cart-item-row';
            
            div.innerHTML = `
                <img src="${imgSrc}" class="cart-item-img" 
                     onclick="${modalCall}" style="cursor: pointer;"
                     onerror="this.src='https://via.placeholder.com/150/f0f0f0/999?text=Фото'">
                     
                <div class="cart-item-info">
                    <div class="cart-item-top">
                        <div class="cart-item-name" 
                             onclick="${modalCall}" style="cursor: pointer;">
                            ${item.name}
                        </div>
                        <div class="cart-item-price-block">
                            <span class="cart-item-price">${item.price * item.quantity} ₽</span>
                            <button class="cart-remove-x" onclick="openRemoveModal('${item.id}')">×</button>
                        </div>
                    </div>
                    <div class="cart-item-controls">
                        <button class="qty-btn" onclick="changeQuantity('${item.id}', -1)">−</button>
                        <span class="qty-val">${item.quantity} шт.</span>
                        <button class="qty-btn" onclick="changeQuantity('${item.id}', 1)">+</button>
                    </div>
                </div>
            `;
            container.appendChild(div);
        });

        if(bottomTotal) bottomTotal.innerText = total + ' ₽';
    }
}