App-Estoque-LiberiKids/CATALOG-SETUP-GUIDE.md

🛍️ Guia de Configuração do Catálogo Liberi Kids

📋 Status do Projeto

✅ COMPLETO - Todas as funcionalidades principais implementadas:

• ✅ Interface do catálogo responsiva
• ✅ Sistema de carrinho de compras
• ✅ Filtros por tamanho e gênero
• ✅ Modal de detalhes do produto
• ✅ Integração WhatsApp para pedidos
• ✅ Painel administrativo para cadastro
• ✅ Autenticação de usuários
• ✅ CSS completo e responsivo

🚨 Conflito de JavaScript Identificado

Você possui dois arquivos JavaScript com funcionalidades similares:

1. script.js - Versão completa e funcional
2. supabase-integration.js - Versão alternativa

📝 Recomendação

Use apenas um dos arquivos para evitar conflitos. Recomendo usar script.js pois está mais completo.

🔧 Como Configurar

Opção 1: Usar script.js (Recomendado)

No seu index.html, mantenha apenas:

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="script.js"></script>

Remova esta linha:

<script src="supabase-integration.js"></script>

Opção 2: Usar supabase-integration.js

Se preferir usar o supabase-integration.js, remova a linha do script.js.

🧪 Teste de Funcionamento

1. Abra o arquivo test-catalog.html no navegador
2. Verifique o console do navegador (F12)
3. Deve mostrar: "🎉 Teste básico passou! Catálogo funcionando."

⚙️ Configuração do Supabase

Para usar dados reais (não apenas demonstração), configure no script.js:

const CONFIG = {
    SUPABASE_URL: 'SUA_URL_SUPABASE',
    SUPABASE_ANON_KEY: 'SUA_CHAVE_SUPABASE',
    SUPABASE_STORAGE_BUCKET: 'produto-imagens',
    WHATSAPP_NUMBER: '5543999762754',
    VENDEDORA_NOME: 'Maiara',
    // ...
};

📱 Funcionalidades Disponíveis

🛒 Para Clientes

• Visualizar catálogo de produtos
• Filtrar por tamanho e gênero
• Adicionar produtos ao carrinho
• Finalizar pedido via WhatsApp
• Login/cadastro de cliente

👩‍💼 Para Administradores

• Login administrativo (clique no logo)
• Cadastrar novos produtos
• Upload de imagens
• Gerenciar variações (tamanho/cor/estoque)

🔐 Credenciais de Teste (Modo Demonstração)

• Email: maiara.seco@gmail.com
• Senha: 123456

🚀 Como Usar

1. Abra index.html no navegador
2. Navegue pelos produtos (dados de demonstração)
3. Teste o carrinho adicionando produtos
4. Acesse o painel admin clicando no logo
5. Finalize pedidos via WhatsApp

📂 Estrutura de Arquivos

site/
├── index.html              # Página principal
├── test-catalog.html       # Página de teste
├── styles.css              # Estilos completos
├── script.js               # JavaScript principal ✅
├── supabase-integration.js # JavaScript alternativo
└── assets/
    └── LogoLiberiKids.png  # Logo da loja

🔍 Solução de Problemas

Produtos não carregam

• Verifique se apenas um arquivo JS está sendo usado
• Abra o console (F12) para ver erros
• Teste com test-catalog.html

Carrinho não funciona

• Verifique se não há conflitos de JavaScript
• Certifique-se que toggleCart() está definida

Admin não abre

• Clique no logo da Liberi Kids
• Use as credenciais de teste
• Verifique console para erros

📞 Suporte

Se encontrar problemas:

1. Abra o console do navegador (F12)
2. Verifique se há erros em vermelho
3. Teste com test-catalog.html
4. Certifique-se de usar apenas um arquivo JS

---

🎉 Parabéns! Seu catálogo está pronto para uso!

Para produção, configure o Supabase com suas credenciais reais e remova os dados de demonstração.