317 lines
6.4 KiB
Markdown
317 lines
6.4 KiB
Markdown
# 🌐 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** 👶✨
|