Demonstração - Footer do Storefront

Footer dinâmico com busca automática de páginas públicas

Componente RealAPI Dinâmica

Footer Dinâmico

Este footer busca automaticamente as páginas públicas da loja via API. Inclui estados de loading, erro e cache otimizado. Teste com diferentes lojas para ver como o conteúdo muda dinamicamente.

Tanstack QueryCache InteligenteEstados de LoadingError Handling

Footer Interativo

Preview do Footer - Loja Exemplo (4 páginas)

Este é o footer real usado no storefront da loja

Informações da API

Endpoint e parâmetros utilizados

GET /api/public/stores/loja-exemplo/pages?is_public=true

Parâmetros

  • • storeSlug: loja-exemplo
  • • is_public: true

Cache

  • • Duração: 5 minutos
  • • Retry: 2 tentativas
  • • Backoff exponencial

Funcionalidades

Recursos implementados no footer

Busca Dinâmica

Carrega páginas públicas automaticamente via API

Links Inteligentes

Gera URLs corretas baseadas no slug da loja

Cache Otimizado

Cache de 5 minutos com retry automático

Estados Visuais

Loading, erro e estados vazios bem definidos

Como Testar

1.Alterne entre as lojas para ver diferentes páginas
2.Observe o estado de loading durante a busca
3.Veja como os links são gerados dinamicamente
4.Teste a loja vazia para ver o estado sem páginas

Detalhes da Implementação

Aspectos técnicos do componente de footer

Gerenciamento de Estado

  • • Hook personalizado usePublicPages
  • • Cache com Tanstack Query
  • • Estados de loading e erro
  • • Retry automático com backoff

Interface do Usuário

  • • Loading spinner durante busca
  • • Ícones de erro informativos
  • • Links com hover effects
  • • Mensagens de estado vazio

Performance

  • • Cache de 5 minutos
  • • Lazy loading de dados
  • • Debounce em mudanças
  • • Otimização de re-renders