# 🛍️ 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:

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

**Remova esta linha:**
```html
<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`:

```javascript
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.