2.2 Catálogo de Produtos

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:

• Ver Detalhes do Produto → - Informação completa
• Adicionar aos Favoritos → - Guardar para depois
• Adicionar ao Carrinho → - Comprar agora

---

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