Skip to content

2.2 Catálogo de Produtos

Screenshot da interface

Descrição

Apresentação organizada do catálogo de produtos com sistema completo de filtros e ordenação.

Funcionalidades Principais

  • Visualização em grelha com 4 produtos por linha (desktop)
  • Filtros por categoria, marca, preço e atributos
  • Ordenação por relevância, preço ou novidades
  • Sistema de paginação para navegação entre páginas
  • Apresentação de badges para produtos em promoção

Benefícios

  • Localização rápida de produtos desejados
  • Comparação visual facilitada
  • Filtros múltiplos para pesquisa refinada
  • Navegação eficiente em catálogos extensos

Como utilizar

1. Selecione a Categoria Desejada

Através do menu de navegação:

  1. Clique em "Categorias" no menu principal
  2. Navegue pela estrutura hierárquica
  3. Selecione a categoria pretendida
  4. O catálogo será automaticamente filtrado

2. Aplique Filtros na Barra Lateral

Filtros Disponíveis:

Por Categoria

  • Selecione uma ou múltiplas categorias
  • Combine categorias principais com subcategorias

Por Preço

  • Defina valor mínimo
  • Defina valor máximo
  • Aplique o filtro

Por Marca

  • Selecione fabricantes específicos
  • Combine múltiplas marcas

Por Atributos

  • Tamanho
  • Formato
  • Cor
  • Acabamento
  • Material
  • Outros atributos personalizados

3. Ordene os Resultados

Use o seletor de ordenação no topo da página:

  • Relevância (padrão) - Algoritmo de recomendação
  • Preço: Menor para Maior - Produtos mais baratos primeiro
  • Preço: Maior para Menor - Produtos mais caros primeiro
  • Novidades - Produtos recentemente adicionados
  • Mais Vendidos - Baseado em estatísticas de vendas
  • Melhor Avaliados - Por classificação dos clientes

4. Navegue Entre Páginas

Use os botões de paginação na parte inferior:

  • Primeira Página - Voltar ao início
  • Página Anterior - Voltar uma página
  • Números - Ir para página específica
  • Próxima Página - Avançar uma página
  • Última Página - Ir para o fim

5. Visualize os Produtos

Cada card de produto apresenta:

  • Imagem principal
  • Nome do produto
  • Preço (com desconto se aplicável)
  • Badge "Oferta" para promoções
  • Classificação em estrelas
  • Ícone de favorito
  • Botão "Ver Detalhes"

Ações Rápidas:

  • Clique na imagem ou nome para ver detalhes
  • Clique no coração para adicionar aos favoritos
  • Passe o cursor para ver imagem alternativa (hover)

Filtros Avançados

Combinar Múltiplos Filtros

Os filtros podem ser combinados para pesquisa refinada:

Categoria: Decoração > Velas
+ Preço: 10€ - 30€
+ Marca: Flor de Lis
+ Atributo: Aroma = Lavanda
= Resultados altamente específicos

Limpar Filtros

  • Limpar Todos - Remove todos os filtros aplicados
  • Limpar Individual - Clique no X de cada filtro ativo
  • Resetar - Voltar à vista padrão

Sistema de Paginação

Configuração Atual

  • Produtos por página: 12 (desktop), 8 (tablet), 4 (mobile)
  • Navegação: Números + Anterior/Próxima
  • Indicador: "Mostrando 1-12 de 156 produtos"

Funcionalidades

  • Mantém filtros ao trocar de página
  • Mantém ordenação selecionada
  • Scroll automático para o topo
  • URL atualizado (bookmarkable)

Cards de Produtos

Informação Apresentada

  1. Imagem Principal

    • Dimensão otimizada
    • Lazy loading
    • Hover para imagem alternativa
  2. Nome do Produto

    • Título claro e descritivo
    • Link para página de detalhes
  3. Preço

    • Preço atual em destaque
    • Preço original riscado (se em oferta)
    • Percentagem de desconto
  4. Badges

    • "OFERTA" - Produto em promoção
    • "NOVO" - Recentemente adicionado
    • "ESGOTADO" - Sem stock
  5. Avaliações

    • Estrelas de classificação (1-5)
    • Número de avaliações
  6. Ações

    • Ícone favorito (coração)
    • Botão "Ver Detalhes"
    • Quick view (opcional)

Visualizações Alternativas

Modo Grelha (Padrão)

  • 4 colunas em desktop
  • 3 colunas em tablet
  • 1-2 colunas em mobile
  • Imagens em destaque

Modo Lista (Se disponível)

  • Uma linha por produto
  • Mais informação visível
  • Ideal para comparação detalhada

Responsividade

Desktop (> 1024px)

  • 4 produtos por linha
  • Filtros na barra lateral esquerda
  • Ordenação no topo

Tablet (768px - 1024px)

  • 2-3 produtos por linha
  • Filtros em sidebar colapsável
  • Touch-friendly

Mobile (< 768px)

  • 1-2 produtos por linha
  • Filtros em modal/drawer
  • Ordenação em dropdown
  • Swipe para navegar

Performance

Otimizações Implementadas

  • Lazy Loading - Imagens carregam conforme scroll
  • Paginação - Apenas 12 produtos carregados por vez
  • Cache - Resultados armazenados localmente
  • Compressão - Imagens otimizadas

SEO

URLs Amigáveis

/produtos
/produtos/categoria/decoracao
/produtos/categoria/decoracao/velas
/produtos?marca=flor-de-lis
/produtos?preco_min=10&preco_max=30

Meta Tags Dinâmicas

  • Título da página baseado em filtros
  • Descrição gerada automaticamente
  • Canonical URLs
  • Schema.org markup

Notas

Dica de Navegação

Use os filtros combinados para encontrar exatamente o que procura. Por exemplo:

  • Categoria + Preço + Marca
  • Combine até 5 filtros simultâneos

Importante

  • Os filtros aplicados mantêm-se durante a navegação
  • A listagem ajusta-se automaticamente ao número de produtos disponíveis
  • Produtos sem stock aparecem com badge "ESGOTADO" mas permanecem visíveis

Contador de Produtos

O número total de produtos encontrados é sempre apresentado no topo: "Encontrados 156 produtos"

Atalhos de Teclado

Para navegação rápida (desktop):

  • Página Anterior
  • Próxima Página
  • Home Primeira Página
  • End Última Página
  • Esc Limpar Filtros

Produtos em Destaque

Alguns produtos podem aparecer com destaque especial:

  • Recomendados para Si - Baseado em histórico
  • Mais Vendidos - Badge especial
  • Novidades - Destacados no topo

Próximos Passos

Após encontrar o produto desejado:


Dúvidas? Contacte o suporte: support@aiobi.pt

Manual do Utilizador - FLOR DE LIS