7.4 KiB
7.4 KiB
🎉 Melhorias do Sistema de Catálogo v2.0
📋 Resumo das Mudanças
Todas as melhorias solicitadas foram implementadas com sucesso!
✨ O Que Foi Alterado
1. URL do Site Fixada
- ✅ Removido campo editável de URL
- ✅ Agora usa sempre
/catalogo(fixo) - ✅ Link direto para visualizar o catálogo
- 📍 Acesse em:
http://localhost:5000/catalogo
2. Novas Configurações
- ✅ Exibir Badge "Novidades" - Mostra/oculta badge ✨ NOVO
- ✅ Exibir Badge "Promoções" - Mostra/oculta badge 🏷️ PROMO
- ✅ Todas as configurações afetam o site público
3. Layout em Lista (Tabela)
- ✅ Produtos exibidos em tabela em vez de cards
- ✅ Mais informações visíveis de uma vez
- ✅ Fácil edição inline
- ✅ Melhor para gerenciar muitos produtos
4. Sistema de Promoções
- ✅ Campo Preço Promocional editável
- ✅ Toggle Em Promoção (clique no badge 🏷️)
- ✅ Ao definir preço promocional, ativa promoção automaticamente
- ✅ Badge visual laranja no produto
- ✅ Cliente vê preço riscado + preço promocional
5. Sistema de Novidades
- ✅ Toggle Novidade (clique no badge ✨)
- ✅ Badge visual azul no produto
- ✅ Cliente vê selo "NOVO" destacado
- ✅ Ideal para lançamentos
6. Estatísticas Expandidas
- ✅ Total de Produtos
- ✅ Visíveis no Catálogo
- ✅ Ocultos
- ✅ Em Promoção 🏷️ (novo!)
- ✅ Novidades ✨ (novo!)
7. Interface Melhorada
| Coluna | Descrição |
|---|---|
| Foto | Miniatura do produto |
| Produto | Nome + marca |
| Preço Normal | Valor de revenda padrão |
| Preço Promocional | Campo editável (em vermelho) |
| Estoque | Badge colorido |
| Status | Visibilidade + Novidade + Promoção |
| Ações | Ocultar/Mostrar + Gerenciar Fotos |
🗄️ Novos Campos no Banco de Dados
Execute o SQL para adicionar os novos campos:
ALTER TABLE produtos
ADD COLUMN IF NOT EXISTS preco_promocional DECIMAL(10,2),
ADD COLUMN IF NOT EXISTS em_promocao BOOLEAN DEFAULT false,
ADD COLUMN IF NOT EXISTS novidade BOOLEAN DEFAULT false;
Arquivo: sql/add-campos-catalogo-melhorias.sql
🎯 Como Usar
Marcar Produto como Promoção
Opção 1 - Com Preço:
- Digite o preço promocional no campo "Preço Promocional"
- Pressione Enter ou clique fora
- ✅ Promoção ativada automaticamente
Opção 2 - Apenas Badge:
- Clique no badge 🏷️ na coluna "Status"
- ✅ Toggle promoção on/off
Marcar Produto como Novidade
- Clique no badge ✨ na coluna "Status"
- ✅ Toggle novidade on/off
Configurar Exibição
- Acesse Site / Catalogo
- Vá em "Configurações do Catálogo"
- Ative/Desative:
- Catálogo Ativo
- Exibir Preços
- Exibir Estoque
- Exibir Badge "Novidades"
- Exibir Badge "Promoções"
- Clique em "Salvar Configurações"
🌐 Como Aparece no Site Público
Produto Normal
┌─────────────────────┐
│ [Imagem] │
│ │
│ Nome do Produto │
│ R$ 99,90 │
│ Estoque: 10 │
└─────────────────────┘
Produto em Promoção
┌─────────────────────┐
│ [Imagem] │
│ 🏷️ PROMOÇÃO │
│ Nome do Produto │
│ ̶R̶$̶ ̶9̶9̶,̶9̶0̶ │
│ R$ 79,90 │
│ Estoque: 10 │
└─────────────────────┘
Produto Novidade
┌─────────────────────┐
│ [Imagem] │
│ ✨ NOVO │
│ Nome do Produto │
│ R$ 99,90 │
│ Estoque: 10 │
└─────────────────────┘
Produto Novidade + Promoção
┌─────────────────────┐
│ [Imagem] │
│ ✨ NOVO 🏷️ PROMO │
│ Nome do Produto │
│ ̶R̶$̶ ̶9̶9̶,̶9̶0̶ │
│ R$ 79,90 │
│ Estoque: 10 │
└─────────────────────┘
📊 Novos Endpoints da API
// Atualizar promoção
PATCH /api/produtos/:id/promocao
Body: { "emPromocao": true }
// Atualizar novidade
PATCH /api/produtos/:id/novidade
Body: { "novidade": true }
// Atualizar preço promocional
PATCH /api/produtos/:id/preco-promocional
Body: { "precoPromocional": 79.90 }
📁 Arquivos Modificados
Frontend
- ✅
client/src/pages/SiteCatalogo.js- Layout em tabela + novos campos - ✅
client/src/styles/site-catalogo.css- Ajustes de grid - ✅
client/src/styles/site-catalogo-table.css- NOVO - Estilos da tabela
Backend
- ✅
server-supabase.js- Novos endpoints
Banco de Dados
- ✅
sql/add-campos-catalogo-melhorias.sql- NOVO - Migração
Documentação
- ✅
MELHORIAS-CATALOGO-V2.md- NOVO - Este arquivo
🚀 Instalação
1. Executar SQL
# No Supabase Dashboard > SQL Editor
# Cole o conteúdo de:
sql/add-campos-catalogo-melhorias.sql
2. Reiniciar Servidor
# Parar o servidor atual (Ctrl+C)
npm run dev
3. Testar
- Acesse:
http://localhost:5000/site/catalogo - Clique em um produto
- Marque como promoção ou novidade
- Defina preço promocional
- Visualize no catálogo:
http://localhost:5000/catalogo
🎨 Características Visuais
Badges Interativos
- Clique para ativar/desativar
- Cores automáticas:
- 🏷️ Promoção - Laranja
- ✨ Novidade - Azul
- 👁️ Visível - Verde
- 👁️🗨️ Oculto - Cinza
Preço Promocional
- Campo vermelho destacado
- Salva automaticamente ao sair
- Se preenchido, ativa promoção
Estoque
- Verde: Disponível
- Vermelho: Esgotado
📝 Checklist de Implementação
- Remover campo URL (usar /catalogo fixo)
- Adicionar configurações Novidades/Promoções
- Mudar cards para lista/tabela
- Campo preço promocional editável
- Toggle promoção
- Toggle novidade
- Novos endpoints API
- Migração SQL
- Estilos CSS
- Estatísticas expandidas
- Documentação
🔮 Próximas Melhorias Sugeridas
- Ordenação de produtos na tabela
- Filtros (por promoção, novidade, etc)
- Edição em massa
- Agendamento de promoções
- Período de vigência de promoções
- Galeria de fotos inline na tabela
- Exportar relatório de promoções
💡 Dicas
Promoção Relâmpago:
- Marque vários produtos
- Defina preços promocionais
- Ative/Desative "Exibir Promoções" para controlar quando mostrar
Lançamento:
- Marque produtos como "Novidade"
- Configure "Exibir Novidades" ON
- Após alguns dias, desmarque as novidades
Combinar:
- Produto pode ser Novidade + Promoção ao mesmo tempo
- Ideal para lançamentos promocionais
✅ Resumo
Antes:
- Cards com poucas informações
- Sem promoções
- Sem novidades
- URL editável
Depois:
- Tabela completa e organizada
- Sistema de promoções com preço
- Sistema de novidades
- URL fixa (/catalogo)
- Badges interativos
- Estatísticas expandidas
- Interface profissional
Data: 24 de outubro de 2025
Versão: 2.0.0
Desenvolvido para: Liberi Kids - Catálogo Online 🛍️✨