App-Estoque-LiberiKids/TESTE-BOTOES-DEBUG.md

🐛 Debug - Carrinho e Botão Entrar

🔍 Testes para Identificar o Problema

Execute os comandos abaixo no Console do Navegador (F12):

Teste 1: Verificar se funções existem

// No console do navegador (F12)
console.log('toggleCart:', typeof toggleCart);
console.log('showLoginModal:', typeof showLoginModal);
console.log('ativarAuthModal:', typeof ativarAuthModal);
console.log('desativarAuthModal:', typeof desativarAuthModal);

Resultado esperado: Todos devem retornar "function"

---

Teste 2: Verificar se elementos existem

// Carrinho
const cartModal = document.getElementById('cartModal');
console.log('cartModal existe:', cartModal !== null);

// Login
const loginModal = document.getElementById('loginModal');
console.log('loginModal existe:', loginModal !== null);

Resultado esperado: Ambos devem retornar true

---

Teste 3: Testar funções manualmente

// Testar carrinho
toggleCart();

// Testar login
showLoginModal();

Resultado esperado: Modais devem abrir

---

Teste 4: Verificar erros no console

1. Abra Console (F12)
2. Recarregue a página (Ctrl+R)
3. Procure por erros em vermelho

Possíveis erros:

• Uncaught ReferenceError: [função] is not defined
• Cannot read property of undefined

---

🔧 Soluções Rápidas

Se função não existe:

1. Limpar cache:

   • Ctrl + Shift + R (Windows/Linux)
   • Cmd + Shift + R (Mac)

2. Verificar se script.js carregou:

// No console
console.log('Script carregado');

3. Forçar reload:
   • F5 várias vezes
   • Fechar e abrir navegador

---

Se elemento não existe:

1. Verificar HTML:

// Verificar se IDs estão corretos
document.querySelectorAll('[id*="cart"]').forEach(el => {
    console.log('ID encontrado:', el.id);
});

document.querySelectorAll('[id*="login"]').forEach(el => {
    console.log('ID encontrado:', el.id);
});

2. Verificar se HTML carregou:

console.log('DOM carregado:', document.readyState);

---

🚨 Problema Comum: Modal não aparece

Verificar display

const cartModal = document.getElementById('cartModal');
console.log('Display inicial:', window.getComputedStyle(cartModal).display);

// Tentar forçar exibição
cartModal.style.display = 'flex';
cartModal.classList.add('active');

---

🔄 Teste Completo Passo a Passo

1. Teste do Carrinho

// Passo 1: Verificar elemento
const cartModal = document.getElementById('cartModal');
if (!cartModal) {
    console.error('❌ cartModal não encontrado!');
} else {
    console.log('✅ cartModal encontrado');
}

// Passo 2: Verificar função
if (typeof toggleCart !== 'function') {
    console.error('❌ toggleCart não é função!');
} else {
    console.log('✅ toggleCart é função');
}

// Passo 3: Tentar abrir
try {
    toggleCart();
    console.log('✅ toggleCart executado');
} catch (error) {
    console.error('❌ Erro ao executar:', error);
}

2. Teste do Login

// Passo 1: Verificar elemento
const loginModal = document.getElementById('loginModal');
if (!loginModal) {
    console.error('❌ loginModal não encontrado!');
} else {
    console.log('✅ loginModal encontrado');
}

// Passo 2: Verificar função
if (typeof showLoginModal !== 'function') {
    console.error('❌ showLoginModal não é função!');
} else {
    console.log('✅ showLoginModal é função');
}

// Passo 3: Tentar abrir
try {
    showLoginModal();
    console.log('✅ showLoginModal executado');
} catch (error) {
    console.error('❌ Erro ao executar:', error);
}

---

🔥 Solução Forçada (Se nada funcionar)

Recriar evento do botão carrinho:

// No console
document.querySelector('.cart-btn').onclick = function() {
    const modal = document.getElementById('cartModal');
    modal.classList.add('pre-active');
    requestAnimationFrame(() => {
        modal.classList.remove('pre-active');
        modal.classList.add('active');
    });
};

Recriar evento do botão entrar:

// No console
document.querySelector('.user-btn').onclick = function() {
    const modal = document.getElementById('loginModal');
    modal.classList.add('pre-active');
    requestAnimationFrame(() => {
        modal.classList.remove('pre-active');
        modal.classList.add('active');
    });
};

---

📋 Checklist de Verificação

• Console sem erros em vermelho
• toggleCart é uma função
• showLoginModal é uma função
• cartModal elemento existe
• loginModal elemento existe
• CSS .auth-modal.active existe
• JavaScript carregou completamente
• Cache foi limpo
• Página foi recarregada

---

💡 Dica: Testar Direto no HTML

Se JavaScript não funcionar, adicione no HTML:

<!-- Teste direto -->
<button onclick="alert('Clique funciona!')">Teste</button>

<!-- Se alert funcionar, problema é nas funções -->
<button onclick="console.log('Botão clicado'); toggleCart()">
    Teste Carrinho
</button>

---

📞 Relatar Problema

Se nada funcionar, forneça:

1. Erros do console: Copie/cole erros em vermelho
2. Resultado dos testes: O que os comandos retornaram
3. Navegador: Chrome/Firefox/Safari + versão
4. Screenshots: Do console com erros

---

Execute os testes acima e me informe o resultado! 🔍