chore: sincroniza projeto para gitea
This commit is contained in:
Tiago
316
SITE-CATALOGO-SETUP.md
Normal file
316
SITE-CATALOGO-SETUP.md
Normal file
@@ -0,0 +1,316 @@
|
||||
# 🌐 Site / Catálogo - Guia de Configuração
|
||||
|
||||
## 📋 Visão Geral
|
||||
|
||||
O módulo **Site / Catálogo** permite gerenciar quais produtos do seu estoque serão exibidos no catálogo online, com controle total sobre visibilidade, preços e configurações.
|
||||
|
||||
## 🚀 Instalação e Configuração
|
||||
|
||||
### 1. Executar Script SQL
|
||||
|
||||
Primeiro, execute o script SQL no Supabase para adicionar o campo de visibilidade:
|
||||
|
||||
```bash
|
||||
# Acesse o SQL Editor do Supabase e execute:
|
||||
sql/add-catalogo-visibility.sql
|
||||
```
|
||||
|
||||
Este script adiciona:
|
||||
- Campo `visivel_catalogo` na tabela produtos
|
||||
- Índice para melhor performance
|
||||
- Define todos os produtos existentes como visíveis por padrão
|
||||
|
||||
### 2. Acessar o Menu
|
||||
|
||||
Após executar o script, o novo menu estará disponível:
|
||||
|
||||
1. Faça login no sistema
|
||||
2. Clique em **"Site / Catalogo"** no menu lateral
|
||||
3. Configure as opções do catálogo
|
||||
|
||||
## ⚙️ Funcionalidades
|
||||
|
||||
### Configurações do Catálogo
|
||||
|
||||
**URL do Site**
|
||||
- Defina a URL onde o catálogo será publicado
|
||||
- Exemplo: `https://liberikids.com.br`
|
||||
|
||||
**Status do Catálogo**
|
||||
- ✅ **Ativo**: Catálogo está disponível online
|
||||
- ❌ **Inativo**: Catálogo está offline para manutenção
|
||||
|
||||
**Exibir Preços**
|
||||
- ✅ Mostrar preços dos produtos no catálogo
|
||||
- ❌ Ocultar preços (apenas mostrar produtos)
|
||||
|
||||
**Exibir Estoque**
|
||||
- ✅ Mostrar quantidade em estoque
|
||||
- ❌ Ocultar informações de estoque
|
||||
|
||||
### Gerenciamento de Produtos
|
||||
|
||||
#### Estatísticas
|
||||
|
||||
O sistema exibe três métricas principais:
|
||||
|
||||
📦 **Total de Produtos**: Todos os produtos cadastrados
|
||||
👁️ **Produtos Visíveis**: Produtos mostrados no catálogo
|
||||
🙈 **Produtos Ocultos**: Produtos não visíveis no catálogo
|
||||
|
||||
#### Controle de Visibilidade
|
||||
|
||||
Para cada produto, você pode:
|
||||
|
||||
**Tornar Visível** 👁️
|
||||
- Clique no botão "Oculto" para tornar o produto visível
|
||||
- Produto aparecerá destacado e disponível no catálogo
|
||||
|
||||
**Tornar Oculto** 🙈
|
||||
- Clique no botão "Visível" para ocultar o produto
|
||||
- Produto fica esmaecido e não aparece no catálogo online
|
||||
|
||||
## 📊 Estrutura de Dados
|
||||
|
||||
### Tabela: produtos
|
||||
|
||||
```sql
|
||||
visivel_catalogo BOOLEAN DEFAULT true
|
||||
```
|
||||
|
||||
- `true`: Produto visível no catálogo
|
||||
- `false`: Produto oculto do catálogo
|
||||
|
||||
### Tabela: configuracoes
|
||||
|
||||
```sql
|
||||
chave: 'catalogo_config'
|
||||
valor: {
|
||||
catalogoAtivo: boolean,
|
||||
urlSite: string,
|
||||
exibirPrecos: boolean,
|
||||
exibirEstoque: boolean
|
||||
}
|
||||
```
|
||||
|
||||
## 🔌 API Endpoints
|
||||
|
||||
### GET /api/configuracoes/catalogo
|
||||
Busca as configurações do catálogo
|
||||
|
||||
**Resposta:**
|
||||
```json
|
||||
{
|
||||
"catalogoAtivo": false,
|
||||
"urlSite": "",
|
||||
"exibirPrecos": true,
|
||||
"exibirEstoque": false
|
||||
}
|
||||
```
|
||||
|
||||
### POST /api/configuracoes/catalogo
|
||||
Salva as configurações do catálogo
|
||||
|
||||
**Body:**
|
||||
```json
|
||||
{
|
||||
"catalogoAtivo": true,
|
||||
"urlSite": "https://liberikids.com.br",
|
||||
"exibirPrecos": true,
|
||||
"exibirEstoque": false
|
||||
}
|
||||
```
|
||||
|
||||
### PATCH /api/produtos/:id/visibilidade
|
||||
Atualiza a visibilidade de um produto
|
||||
|
||||
**Body:**
|
||||
```json
|
||||
{
|
||||
"visivelCatalogo": true
|
||||
}
|
||||
```
|
||||
|
||||
**Resposta:**
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"message": "Produto visível no catálogo",
|
||||
"produto": { ... }
|
||||
}
|
||||
```
|
||||
|
||||
## 🎨 Layout do Catálogo
|
||||
|
||||
### Grid de Produtos
|
||||
|
||||
Cada produto exibe:
|
||||
|
||||
1. **Imagem do Produto**
|
||||
- Imagem principal ou ícone de placeholder
|
||||
- 200px de altura
|
||||
|
||||
2. **Informações**
|
||||
- Nome do produto
|
||||
- Descrição (máximo 2 linhas)
|
||||
- Preço de venda
|
||||
- Quantidade em estoque
|
||||
|
||||
3. **Botão de Visibilidade**
|
||||
- 🟢 Verde: Produto visível
|
||||
- ⚪ Cinza: Produto oculto
|
||||
|
||||
### Estados Visuais
|
||||
|
||||
**Produto Visível**
|
||||
- Fundo branco
|
||||
- Borda normal
|
||||
- Botão verde "Visível"
|
||||
|
||||
**Produto Oculto**
|
||||
- Opacidade reduzida (50%)
|
||||
- Botão cinza "Oculto"
|
||||
|
||||
## 🔧 Troubleshooting
|
||||
|
||||
### Campo visivel_catalogo não existe
|
||||
|
||||
**Erro:**
|
||||
```
|
||||
column "visivel_catalogo" does not exist
|
||||
```
|
||||
|
||||
**Solução:**
|
||||
Execute o script SQL:
|
||||
```bash
|
||||
sql/add-catalogo-visibility.sql
|
||||
```
|
||||
|
||||
### Produtos não aparecem
|
||||
|
||||
**Verificar:**
|
||||
1. Campo `visivel_catalogo = true` no banco
|
||||
2. Campo `ativo = true` no banco
|
||||
3. Produto tem variações cadastradas
|
||||
|
||||
### API não responde
|
||||
|
||||
**Verificar:**
|
||||
1. Servidor está rodando (porta 5000)
|
||||
2. Supabase está configurado corretamente
|
||||
3. Variáveis de ambiente estão corretas
|
||||
|
||||
## 📝 Fluxo de Uso
|
||||
|
||||
### Para Administradores
|
||||
|
||||
1. Acesse **Site / Catalogo**
|
||||
2. Configure as opções gerais
|
||||
3. Revise os produtos cadastrados
|
||||
4. Oculte produtos sem estoque ou inativos
|
||||
5. Salve as configurações
|
||||
6. Ative o catálogo quando pronto
|
||||
|
||||
### Para o Catálogo Online
|
||||
|
||||
1. Sistema busca apenas produtos com `visivel_catalogo = true`
|
||||
2. Respeita configurações de exibição (preços, estoque)
|
||||
3. Mostra produtos ordenados por data de cadastro
|
||||
4. Exibe imagens e descrições conforme cadastrado
|
||||
|
||||
## 🎯 Boas Práticas
|
||||
|
||||
### Visibilidade de Produtos
|
||||
|
||||
✅ **Manter Visível:**
|
||||
- Produtos com estoque disponível
|
||||
- Produtos com fotos de qualidade
|
||||
- Produtos com descrições completas
|
||||
- Produtos da estação atual
|
||||
|
||||
❌ **Manter Oculto:**
|
||||
- Produtos sem estoque
|
||||
- Produtos descontinuados
|
||||
- Produtos sem foto
|
||||
- Produtos em processo de cadastro
|
||||
|
||||
### Configurações
|
||||
|
||||
**Desenvolvimento:**
|
||||
- Catálogo: Inativo
|
||||
- Exibir Preços: Sim
|
||||
- Exibir Estoque: Sim
|
||||
|
||||
**Produção:**
|
||||
- Catálogo: Ativo
|
||||
- Exibir Preços: Conforme estratégia
|
||||
- Exibir Estoque: Não (para evitar frustração)
|
||||
|
||||
## 📱 Responsividade
|
||||
|
||||
O layout é totalmente responsivo:
|
||||
|
||||
**Desktop (> 768px)**
|
||||
- Grid de 3-4 colunas
|
||||
- Botões grandes e visíveis
|
||||
|
||||
**Mobile (< 768px)**
|
||||
- Grid de 1 coluna
|
||||
- Cards otimizados para toque
|
||||
- Botões expandidos
|
||||
|
||||
## 🔐 Segurança
|
||||
|
||||
- Apenas administradores logados podem:
|
||||
- Acessar o painel de catálogo
|
||||
- Modificar configurações
|
||||
- Alterar visibilidade de produtos
|
||||
|
||||
- O catálogo público terá acesso somente leitura
|
||||
|
||||
## 🎨 Personalização
|
||||
|
||||
### Cores
|
||||
|
||||
As cores podem ser alteradas em:
|
||||
```css
|
||||
/client/src/styles/site-catalogo.css
|
||||
```
|
||||
|
||||
Principais variáveis:
|
||||
- `#667eea` - Cor primária (roxo)
|
||||
- `#48bb78` - Sucesso (verde)
|
||||
- `#ed8936` - Aviso (laranja)
|
||||
|
||||
### Textos
|
||||
|
||||
Textos podem ser alterados em:
|
||||
```javascript
|
||||
/client/src/pages/SiteCatalogo.js
|
||||
```
|
||||
|
||||
## 📊 Métricas
|
||||
|
||||
O sistema exibe:
|
||||
- Total de produtos cadastrados
|
||||
- Produtos visíveis no catálogo
|
||||
- Produtos ocultos do catálogo
|
||||
|
||||
Útil para:
|
||||
- Acompanhar o crescimento do catálogo
|
||||
- Identificar produtos que precisam de atenção
|
||||
- Tomar decisões sobre quais produtos promover
|
||||
|
||||
## 🚀 Próximos Passos
|
||||
|
||||
Após configurar o Site / Catálogo, você pode:
|
||||
|
||||
1. Integrar com um site WordPress
|
||||
2. Criar uma landing page personalizada
|
||||
3. Exportar dados para redes sociais
|
||||
4. Gerar QR Code para o catálogo
|
||||
5. Criar materiais de marketing
|
||||
|
||||
---
|
||||
|
||||
**Desenvolvido para Liberi Kids - Moda Infantil** 👶✨
|
||||
Reference in New Issue
Block a user