4.2 KiB
4.2 KiB
🛍️ 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:
const CONFIG = {
WHATSAPP_NUMBER: '5511999999999', // Número da Maiara
VENDEDORA_NOME: 'Maiara'
};
3. Fluxo de Compra
- Navegar pelos produtos no catálogo
- Filtrar por categoria, tamanho ou gênero
- Adicionar produtos ao carrinho
- Revisar itens no carrinho lateral
- 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
{
"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 👶✨