App-Estoque-LiberiKids/SITE-CATALOGO-SETUP.md

🌐 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:

# 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

visivel_catalogo BOOLEAN DEFAULT true

• true: Produto visível no catálogo
• false: Produto oculto do catálogo

Tabela: configuracoes

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:

{
  "catalogoAtivo": false,
  "urlSite": "",
  "exibirPrecos": true,
  "exibirEstoque": false
}

POST /api/configuracoes/catalogo

Salva as configurações do catálogo

Body:

{
  "catalogoAtivo": true,
  "urlSite": "https://liberikids.com.br",
  "exibirPrecos": true,
  "exibirEstoque": false
}

PATCH /api/produtos/:id/visibilidade

Atualiza a visibilidade de um produto

Body:

{
  "visivelCatalogo": true
}

Resposta:

{
  "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:

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:

/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:

/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 👶✨