Pular para o conteúdo principal

Atributos

Bem-vindo ao guia de Atributos do CMS E-commerce! Este manual irá ajudá-lo a criar, gerenciar e organizar os atributos que definem as características específicas dos produtos no catálogo.

Visão Geral​

A tela de Atributos de Produtos permite que você:

  • 📋 Visualize todos os atributos cadastrados no sistema
  • 🔍 Busque atributos por nome
  • ➕ Crie novos atributos para definir características de produtos
  • ✏️ Edite atributos existentes para ajustar nome, valor e grupo
  • 🗑️ Exclua atributos que não são mais necessários
  • 🎨 Gerencie cores com seletor visual para atributos do tipo cor

Os atributos são os valores específicos que compõem as características dos produtos. Por exemplo, se você tem um grupo de atributo "COR", os atributos seriam "VERMELHO", "AZUL", "VERDE", etc. Se tem um grupo "TAMANHO", os atributos seriam "P", "M", "G", "GG".

Acessando a Tela de Atributos​

A tela de atributos está localizada no menu de Catálogo do sistema. Ao acessá-la, você verá:

  • Título "Atributos de Produtos"
  • Subtítulo "Gerencie os atributos disponíveis para seus produtos"
  • Botão "Criar Atributo"
  • Barra de busca
  • Seletor de atributos por página
  • Tabela com os atributos cadastrados

Tela de atributos

Como Buscar Atributos​

Busca por Nome​

A barra de busca permite encontrar atributos específicos por nome:

Como usar:

  1. Digite o nome do atributo no campo de busca (ex: "VERMELHO", "GRANDE", "220V")
  2. Pressione Enter para realizar a busca
  3. Os resultados serão filtrados automaticamente

Barra de busca

Dica

Use nomes completos ou parciais. Por exemplo, digite "VER" para encontrar "VERMELHO" ou atributos relacionados.

Atributos por Página​

Para facilitar a navegação, você pode ajustar quantos atributos são exibidos por vez:

  1. Localize o seletor "Atributos por página"
  2. Escolha entre: 10, 15, 20, 25, 30 atributos por página
  3. Use a paginação no rodapé da tabela para navegar

Entendendo a Tabela de Atributos​

A tabela exibe as seguintes informações:

Colunas da Tabela​

ColunaDescrição
NomeNome do atributo (Ex: VERMELHO, P, 110V)
ValorValor adicional do atributo (cor hexadecimal, etc.)
Grupo de AtributoGrupo ao qual o atributo pertence

Indicadores Visuais​

  • Cada grupo de atributo é exibido com um badge cinza para fácil identificação
  • O valor pode exibir códigos de cor, textos descritivos ou "-" quando não preenchido
  • Linhas da tabela são clicáveis para acessar os detalhes do atributo

Tabela de atributos

Como Criar um Novo Atributo​

Passo a Passo para Criar​

Passo 1: Clique em "Criar Atributo"​

No canto superior direito da tela, clique no botão "Criar Atributo".

Botão Criar Atributo

Passo 2: Selecione o Grupo de Atributo​

Um modal será aberto. O primeiro passo é selecionar o grupo de atributo:

  1. Clique no botão "Selecione o grupo de atributo"
  2. Uma lista de grupos será exibida
  3. Clique no grupo desejado (Ex: COR, TAMANHO, VOLTAGEM)

Seleção de grupo de atributo

Importante

Você deve selecionar um grupo de atributo antes de preencher os demais campos. O grupo define o tipo e a categoria do atributo.

Passo 3: Preencha o Nome​

  1. Nome (obrigatório): Digite o nome do atributo em letras maiúsculas
    • Exemplos: "VERMELHO", "GRANDE", "220V", "ALGODÃO"

Campo de nome

Dica

O nome será automaticamente convertido para maiúsculas para manter a padronização.

Passo 4: Preencha o Valor (Opcional)​

Dependendo do tipo de grupo selecionado, você verá diferentes opções:

Para Grupos do Tipo COR:

  1. Clique no botão "Selecionar Cor"
  2. Use o seletor de cores visual
  3. O código hexadecimal será preenchido automaticamente
  4. Você verá uma prévia da cor selecionada

Seletor de cor

Para Outros Tipos de Grupos:

  1. Campo de texto opcional para descrição adicional
  2. Use para informações complementares sobre o atributo
Dica Importante

O campo "Valor" é opcional para a maioria dos tipos de atributos. Para grupos do tipo COR, o valor armazena o código hexadecimal da cor.

Passo 5: Confirme a Criação​

  1. Revise os dados preenchidos
  2. Clique no botão "Criar Atributo"
  3. Aguarde a confirmação (você verá "Criando...")
  4. Você será redirecionado automaticamente para a tela de detalhes do novo atributo

Botão Criar

Sucesso

Após criar o atributo, você será direcionado para a página de detalhes onde poderá visualizar todas as informações e fazer edições se necessário.

Visualizando Detalhes de um Atributo​

Para ver informações completas sobre um atributo:

  1. Clique em qualquer linha da tabela
  2. Você será direcionado para a tela de detalhes

Tela de detalhes do atributo

Informações Disponíveis na Tela de Detalhes​

1. Cabeçalho​

  • Nome do atributo em destaque
  • Subtítulo "Atributo do catálogo de produtos"
  • Botão "Deletar": Para remover o atributo (vermelho)
  • Botão "Voltar": Para retornar à lista de atributos

2. Card de Informações do Atributo​

Exibe:

  • ID do Atributo: Identificador único (não editável, fundo cinza)
  • Grupo de Atributo: Badge clicável que leva à página do grupo
  • Nome do Atributo: Nome atual do atributo (editável)
  • Valor: Informação adicional do atributo (editável)
    • Para cores: Exibe preview visual da cor + código hexadecimal
    • Para outros tipos: Texto descritivo ou "-" se não preenchido

Card de informações

3. Card do Grupo de Atributo​

Card clicável que exibe:

  • Ícone do grupo de atributo
  • Nome do grupo
  • Texto "Clique para ver detalhes"

Ao clicar, você é redirecionado para a página de detalhes do grupo de atributo.

Card do grupo

4. Card de Informações de Auditoria​

Criação:

  • 👤 Criado por: Nome do usuário que criou
  • 📅 Data de criação: Data e hora da criação

Última Atualização (quando aplicável):

  • 👤 Atualizado por: Nome do usuário que fez a última alteração
  • 📅 Data de atualização: Data e hora da última modificação

Card de auditoria

Como Editar um Atributo​

Passo a Passo para Editar​

Passo 1: Acesse os Detalhes​

  1. Clique no atributo desejado na tabela
  2. Na tela de detalhes, clique no botão "Editar" no card de informações

Botão Editar

Passo 2: Modifique os Dados​

O card de informações entrará em modo de edição:

  1. Grupo de Atributo: Pode ser alterado clicando no botão
  2. Nome: Digite o novo nome
  3. Valor:
    • Para cores: Use o seletor de cores
    • Para outros tipos: Edite o texto

Modo de edição

Atenção

Alterar o grupo de atributo pode afetar a forma como o valor é armazenado. Por exemplo, mudar de um grupo normal para um grupo do tipo COR alterará o campo de valor para um seletor de cores.

Passo 3: Salve as Alterações​

  1. Revise as modificações
  2. Clique no botão "Salvar" (ícone de check verde)
  3. Aguarde a confirmação (você verá "Salvando...")
  4. As informações serão atualizadas automaticamente

Para cancelar a edição, clique no botão "Cancelar" (ícone de X).

Botões de ação

Como Excluir um Atributo​

Passo a Passo para Excluir​

Importante

A exclusão de um atributo é uma ação irreversível e pode afetar produtos associados. Tenha certeza antes de prosseguir.

Passo 1: Acesse os Detalhes​

  1. Clique no atributo desejado na tabela
  2. Na tela de detalhes, clique no botão "Deletar" (vermelho) no cabeçalho

Botão Deletar

Passo 2: Confirme a Exclusão​

Um diálogo de confirmação será exibido com:

  • Título: "Confirmar exclusão"
  • Mensagem: Confirmação com o nome do atributo
  • Aviso: "Esta ação não pode ser desfeita"

Diálogo de confirmação

Passo 3: Finalize a Exclusão​

  1. Leia atentamente o aviso
  2. Clique em "Deletar" para confirmar (ou "Cancelar" para desistir)
  3. Aguarde o processamento (você verá "Deletando...")
  4. Você será redirecionado para a lista de atributos

Casos de Uso Práticos​

1. Criar Atributos de Cor para Produtos​

Situação: Você precisa cadastrar cores específicas para produtos.

Como fazer:

  1. Certifique-se de que existe um grupo de atributo do tipo "Cor" (Ex: COR)
  2. Clique em "Criar Atributo"
  3. Selecione o grupo "COR"
  4. Digite o nome: "VERMELHO"
  5. Use o seletor de cores para escolher o tom de vermelho desejado
  6. Clique em "Criar Atributo"
  7. Repita para outras cores (AZUL, VERDE, PRETO, etc.)

2. Cadastrar Tamanhos de Roupas​

Situação: Criar atributos de tamanho para produtos de vestuário.

Como fazer:

  1. Certifique-se de que existe um grupo "TAMANHO"
  2. Clique em "Criar Atributo"
  3. Selecione o grupo "TAMANHO"
  4. Digite o nome: "P"
  5. Deixe o valor em branco ou adicione descrição opcional
  6. Clique em "Criar Atributo"
  7. Repita para M, G, GG, XG, etc.

3. Criar Atributos de Voltagem​

Situação: Cadastrar voltagens para produtos eletrônicos.

Como fazer:

  1. Certifique-se de que existe um grupo "VOLTAGEM"
  2. Clique em "Criar Atributo"
  3. Selecione o grupo "VOLTAGEM"
  4. Digite o nome: "110V"
  5. Clique em "Criar Atributo"
  6. Repita para "220V" e "BIVOLT"

4. Editar a Cor de um Atributo Existente​

Situação: Ajustar o tom de cor de um atributo já cadastrado.

Como fazer:

  1. Busque pelo nome do atributo (ex: "VERMELHO")
  2. Clique no atributo na tabela
  3. Clique em "Editar" no card de informações
  4. Clique em "Selecionar Cor"
  5. Escolha o novo tom de vermelho
  6. Clique em "Salvar"

5. Buscar Atributos de um Grupo Específico​

Situação: Ver todos os atributos do grupo "COR".

Como fazer:

  1. Na tela de lista de atributos, use a barra de busca
  2. Analise a coluna "Grupo de Atributo" na tabela
  3. Identifique visualmente os atributos do grupo desejado
  4. Clique em qualquer atributo para ver mais detalhes
  5. No card do grupo, clique para ver todos os atributos daquele grupo

Problemas Comuns e Soluções​

❌ "Nenhum atributo cadastrado"​

Problema: A tabela está vazia e não há atributos cadastrados.

Soluções:

  • Se for seu primeiro acesso, crie atributos clicando em "Criar Atributo"
  • Certifique-se de que você já criou grupos de atributos (pré-requisito)
  • Verifique se você tem permissão para visualizar atributos
  • Se aplicou filtros, limpe a busca para ver todos os atributos

❌ "Nenhum atributo encontrado com esse filtro"​

Problema: A busca não retornou resultados.

Soluções:

  • Verifique a ortografia do termo buscado
  • Tente termos mais genéricos (ex: "VER" em vez de "VERMELHO ESCURO")
  • Limpe a busca pressionando X no campo ou apagando o texto
  • Pressione Enter para atualizar os resultados

❌ Erro ao criar atributo​

Problema: O botão "Criar Atributo" está desabilitado ou apresenta erro.

Soluções:

  • Verifique se todos os campos obrigatórios estão preenchidos:
    • ✅ Grupo de Atributo
    • ✅ Nome
  • Certifique-se de que selecionou um grupo de atributo primeiro
  • Verifique se o nome não está vazio
  • Para grupos do tipo COR, certifique-se de selecionar uma cor
  • Verifique se você tem permissão para criar atributos

❌ Não consigo editar um atributo​

Problema: O botão "Editar" não aparece ou está desabilitado.

Soluções:

  • Verifique se você tem permissão para editar atributos
  • Certifique-se de que está na tela de detalhes do atributo
  • O botão está localizado no card "Informações do Atributo"
  • Recarregue a página e tente novamente
  • Entre em contato com o administrador para verificar permissões

❌ Seletor de cores não aparece​

Problema: Não consigo selecionar cores para um atributo.

Possíveis causas:

  • O grupo de atributo selecionado não é do tipo "COR"
  • O seletor só aparece para grupos configurados como tipo "Cor"

Soluções:

  • Certifique-se de selecionar um grupo do tipo "Cor"
  • Se não existe, crie primeiro um grupo de atributo do tipo "Cor"
  • Navegue até Grupos de Atributos para verificar ou criar o grupo adequado

❌ Erro ao excluir atributo​

Problema: A exclusão falha ou retorna erro.

Possíveis causas:

  • O atributo pode estar vinculado a produtos existentes
  • Você pode não ter permissão para excluir atributos
  • Pode haver variações de produtos usando este atributo

Soluções:

  • Primeiro, remova o atributo de todos os produtos que o utilizam
  • Verifique se há variações de produtos usando este atributo
  • Entre em contato com o suporte técnico se o problema persistir

Diferença entre Grupos de Atributos e Atributos​

É importante entender a relação hierárquica:

Grupo de Atributo​

  • É a categoria ou tipo (Ex: COR, TAMANHO, VOLTAGEM)
  • Define o tipo de dados que os atributos terão
  • É criado primeiro na hierarquia

Atributo​

  • É o valor específico dentro de um grupo (Ex: VERMELHO, P, 110V)
  • Pertence a um grupo de atributo
  • É criado depois dos grupos

Exemplo Prático:

Grupo de Atributo: COR (tipo: Cor)
├─ Atributo: VERMELHO (valor: #FF0000)
├─ Atributo: AZUL (valor: #0000FF)
└─ Atributo: VERDE (valor: #00FF00)

Grupo de Atributo: TAMANHO (tipo: Tamanho)
├─ Atributo: P
├─ Atributo: M
├─ Atributo: G
└─ Atributo: GG

Trabalhando com Atributos de Cor​

Entendendo o Seletor de Cores​

Quando você cria ou edita um atributo de um grupo do tipo "COR", o sistema oferece:

  1. Botão "Selecionar Cor" com preview visual
  2. Campo de código hexadecimal (não editável diretamente)
  3. Preview da cor selecionada ao lado do campo

Como Usar o Seletor de Cores​

  1. Clique em "Selecionar Cor"
  2. Uma paleta de cores será exibida
  3. Clique na cor desejada ou ajuste os valores RGB
  4. O código hexadecimal será atualizado automaticamente
  5. Você verá a prévia da cor em tempo real

Seletor de cores em uso

Visualização de Cores na Tela de Detalhes​

Quando você acessa um atributo do tipo cor:

  • O valor é exibido com um quadrado colorido mostrando a cor
  • O código hexadecimal aparece ao lado
  • Exemplo: 🟥 #FF0000

Visualização de cor

Boas Práticas​

📝 Nomenclatura​

  1. Use letras maiúsculas para nomes de atributos (Ex: VERMELHO, GRANDE, 220V)
  2. Seja descritivo mas conciso
  3. Padronize os nomes dentro do mesmo grupo
  4. Evite caracteres especiais desnecessários

Exemplos corretos:

  • ✅ VERMELHO
  • ✅ P
  • ✅ 110V
  • ✅ ALGODÃO

Exemplos a evitar:

  • ❌ vermelho
  • ❌ Tamanho Pequeno
  • ❌ 110
  • ❌ algodao

🎨 Cores​

  1. Use cores consistentes com a identidade visual dos produtos
  2. Nomeie as cores de forma clara (VERMELHO, AZUL, VERDE)
  3. Evite nomes subjetivos como "Cor Bonita" ou "Tom Especial"
  4. Use tons próximos ao real para representar fielmente o produto

Boas práticas:

  • ✅ VERMELHO (#FF0000)
  • ✅ AZUL MARINHO (#000080)
  • ✅ VERDE ESCURO (#006400)

🔄 Organização​

  1. Crie grupos antes de cadastrar atributos
  2. Revise periodicamente os atributos existentes
  3. Exclua atributos não utilizados para manter organização
  4. Padronize nomenclaturas dentro de cada grupo
  5. Agrupe atributos similares no mesmo grupo

⚠️ Cuidados ao Editar​

  1. Evite alterar o grupo de atributos já vinculados a produtos
  2. Comunique mudanças importantes à equipe
  3. Teste mudanças em ambiente controlado primeiro
  4. Verifique impacto em produtos antes de excluir

🎯 Uso em Produtos​

  1. Crie todos os atributos necessários antes de cadastrar produtos
  2. Mantenha consistência nos valores (sempre maiúsculas)
  3. Use o valor adicional para informações complementares quando necessário
  4. Documente internamente o propósito de cada atributo

Perguntas Frequentes (FAQ)​

Posso ter dois atributos com o mesmo nome?​

Sim, tecnicamente é possível, mas não é recomendado. Se precisar de atributos similares, use o campo "Valor" para diferenciá-los ou crie nomes mais descritivos (Ex: VERMELHO CLARO, VERMELHO ESCURO).

O que é o campo "Valor"?​

O campo "Valor" armazena informações adicionais sobre o atributo:

  • Para cores: armazena o código hexadecimal (Ex: #FF0000)
  • Para outros tipos: pode conter descrições opcionais

Posso mudar um atributo de grupo depois de criado?​

Sim, mas com muito cuidado. Mudar o grupo pode alterar a forma como o valor é interpretado e pode afetar produtos que já usam este atributo. Recomenda-se fazer isso apenas se absolutamente necessário.

O que acontece se eu excluir um atributo que está em uso?​

A exclusão pode afetar produtos associados. O sistema pode prevenir a exclusão se houver dependências. Sempre verifique produtos e variações antes de excluir.

Quantos atributos posso criar?​

Não há limite técnico, mas é recomendado criar apenas os atributos necessários para os produtos do catálogo. Mantenha a organização e evite duplicatas.

Preciso criar o grupo de atributo antes?​

Sim! Você não consegue criar um atributo sem antes ter um grupo de atributo cadastrado. O grupo define o tipo e a categoria do atributo.

Como faço para ver todos os atributos de um grupo específico?​

  1. Acesse qualquer atributo do grupo desejado
  2. Na tela de detalhes, clique no card "Grupo de Atributo"
  3. Você será direcionado para a página do grupo
  4. Lá você pode ver todos os atributos relacionados

Posso adicionar emojis ou caracteres especiais no nome?​

Tecnicamente sim, mas não é recomendado. Use apenas letras, números e espaços para garantir compatibilidade e facilitar buscas.

Suporte​

Precisa de Ajuda?​

Se você encontrou algum problema ou tem dúvidas:

  1. Verifique este manual para soluções comuns
  2. Consulte a seção de Problemas Comuns acima
  3. Entre em contato com o suporte técnico com as seguintes informações:
    • Print da tela ou descrição do problema
    • Nome do atributo (se aplicável)
    • Nome do grupo de atributo
    • Mensagens de erro exibidas
    • O que você estava tentando fazer

Informações Úteis ao Contatar o Suporte​

Tenha em mãos:

  • Seu nome de usuário
  • Nome do atributo relacionado
  • Nome e tipo do grupo de atributo
  • Prints de tela do problema
  • Descrição detalhada do que você tentou fazer

Glossário​

TermoSignificado
AtributoValor específico de uma característica de produto (Ex: VERMELHO, P, 110V)
Grupo de AtributoCategoria que organiza atributos similares (Ex: COR, TAMANHO)
ValorInformação adicional do atributo (código de cor, descrição, etc.)
BadgeEtiqueta visual que identifica o grupo de atributo
HexadecimalCódigo de cor no formato #RRGGBB (Ex: #FF0000 para vermelho)
AuditoriaRegistro de quem criou/modificou e quando
Seletor de CoresFerramenta visual para escolher cores em atributos do tipo cor

Próximos Passos​

Após dominar os atributos, você pode:

  • 📦 Vincular atributos aos produtos do catálogo
  • 🎨 Criar variações de produtos usando diferentes atributos
  • 🏷️ Organizar características de produtos de forma estruturada
  • 📊 Facilitar a busca e filtragem de produtos por atributos

Bom uso da ferramenta de atributos! 🚀