164 lines
4.2 KiB
Markdown
164 lines
4.2 KiB
Markdown
# 🛍️ Catálogo Web - Liberi Kids
|
|
|
|
Catálogo online da **Liberi Kids - Moda Infantil** com carrinho de compras integrado ao WhatsApp.
|
|
|
|
## 🎯 Funcionalidades
|
|
|
|
### ✅ Catálogo de Produtos
|
|
- **Carregamento automático** dos produtos cadastrados no sistema
|
|
- **Filtros inteligentes** por categoria, tamanho e gênero
|
|
- **Design responsivo** para desktop e mobile
|
|
- **Imagens otimizadas** com fallback para produtos sem foto
|
|
|
|
### 🛒 Carrinho de Compras
|
|
- **Adicionar/remover produtos** com animações suaves
|
|
- **Controle de quantidade** individual por item
|
|
- **Cálculo automático** do total
|
|
- **Persistência visual** do estado do carrinho
|
|
|
|
### 📱 Integração WhatsApp
|
|
- **Envio automático** do pedido para a vendedora Maiara
|
|
- **Formatação profissional** da mensagem
|
|
- **Detalhes completos** do pedido (produtos, quantidades, valores)
|
|
- **Timestamp** e informações de origem
|
|
|
|
### 🎨 Interface Moderna
|
|
- **Design gradient** com cores atrativas
|
|
- **Animações CSS** suaves e profissionais
|
|
- **Tipografia** Google Fonts (Poppins)
|
|
- **Ícones** Font Awesome
|
|
- **Layout responsivo** para todos os dispositivos
|
|
|
|
## 🚀 Como Usar
|
|
|
|
### 1. Acesso ao Catálogo
|
|
```
|
|
http://localhost:5000/catalogo
|
|
```
|
|
|
|
### 2. Configuração do WhatsApp
|
|
Edite o arquivo `script.js` e altere o número da vendedora:
|
|
|
|
```javascript
|
|
const CONFIG = {
|
|
WHATSAPP_NUMBER: '5511999999999', // Número da Maiara
|
|
VENDEDORA_NOME: 'Maiara'
|
|
};
|
|
```
|
|
|
|
### 3. Fluxo de Compra
|
|
1. **Navegar** pelos produtos no catálogo
|
|
2. **Filtrar** por categoria, tamanho ou gênero
|
|
3. **Adicionar** produtos ao carrinho
|
|
4. **Revisar** itens no carrinho lateral
|
|
5. **Finalizar** pedido via WhatsApp
|
|
|
|
## 📋 Estrutura de Arquivos
|
|
|
|
```
|
|
site/
|
|
├── index.html # Página principal do catálogo
|
|
├── styles.css # Estilos CSS responsivos
|
|
├── script.js # JavaScript com todas as funcionalidades
|
|
└── README.md # Esta documentação
|
|
```
|
|
|
|
## 🔧 Integração com o Sistema
|
|
|
|
### API Utilizada
|
|
- **Endpoint:** `/api/catalogo/produtos`
|
|
- **Método:** GET
|
|
- **Retorna:** Produtos em estoque formatados para o catálogo
|
|
|
|
### Dados dos Produtos
|
|
```json
|
|
{
|
|
"id": 1,
|
|
"nome": "Camiseta Infantil",
|
|
"preco_venda": 29.90,
|
|
"tamanho": "M",
|
|
"genero": "unissex",
|
|
"estacao": "verao",
|
|
"categoria": "camiseta",
|
|
"imagem": "/uploads/produto1.jpg",
|
|
"estoque": 5,
|
|
"descricao": "Camiseta confortável..."
|
|
}
|
|
```
|
|
|
|
## 🎨 Personalização
|
|
|
|
### Cores do Tema
|
|
- **Primária:** `#667eea` (Azul gradient)
|
|
- **Secundária:** `#764ba2` (Roxo gradient)
|
|
- **Sucesso:** `#10b981` (Verde)
|
|
- **Erro:** `#ef4444` (Vermelho)
|
|
- **WhatsApp:** `#25d366` (Verde WhatsApp)
|
|
|
|
### Responsividade
|
|
- **Desktop:** Layout completo com 3-4 colunas
|
|
- **Tablet:** Layout adaptado com 2-3 colunas
|
|
- **Mobile:** Layout single-column otimizado
|
|
|
|
## 📱 Funcionalidades do WhatsApp
|
|
|
|
### Formato da Mensagem
|
|
```
|
|
🛍️ NOVO PEDIDO - LIBERI KIDS
|
|
|
|
👋 Olá Maiara! Gostaria de fazer um pedido:
|
|
|
|
📦 ITENS DO PEDIDO:
|
|
1. Camiseta Infantil
|
|
• Tamanho: M
|
|
• Gênero: Unissex
|
|
• Quantidade: 2x
|
|
• Preço unitário: R$ 29,90
|
|
• Subtotal: R$ 59,80
|
|
|
|
📊 RESUMO DO PEDIDO:
|
|
• Total de itens: 2
|
|
• Valor total: R$ 59,80
|
|
|
|
📱 Pedido feito através do catálogo online
|
|
🕐 07/10/2024 17:30:15
|
|
|
|
Aguardo retorno para confirmar o pedido! 😊
|
|
```
|
|
|
|
## 🔄 Sincronização Automática
|
|
|
|
### Produtos Novos
|
|
- **Automático:** Novos produtos aparecem no catálogo imediatamente
|
|
- **Estoque:** Apenas produtos com estoque > 0 são exibidos
|
|
- **Ordem:** Produtos mais recentes aparecem primeiro
|
|
|
|
### Atualizações em Tempo Real
|
|
- **Preços:** Atualizados automaticamente
|
|
- **Estoque:** Produtos sem estoque são ocultados
|
|
- **Imagens:** Carregamento otimizado com fallback
|
|
|
|
## 🛡️ Segurança e Performance
|
|
|
|
### Otimizações
|
|
- **Lazy loading** de imagens
|
|
- **Debounce** nos filtros
|
|
- **Cache** de produtos carregados
|
|
- **Compressão** de imagens
|
|
|
|
### Tratamento de Erros
|
|
- **Fallback** para produtos sem imagem
|
|
- **Retry** automático em caso de erro de rede
|
|
- **Mensagens** de erro amigáveis
|
|
- **Loading states** informativos
|
|
|
|
## 📞 Suporte
|
|
|
|
Para dúvidas ou problemas com o catálogo:
|
|
- **WhatsApp:** (11) 99999-9999
|
|
- **E-mail:** contato@liberikids.com.br
|
|
|
|
---
|
|
|
|
**Liberi Kids - Moda Infantil** 👶✨
|