Usabilidade

Usabilidade

Cadastro de imagens de produto

  • O campo de imagem aceita uma URL de imagem pública (http/https).
  • Não há upload de arquivo nesta versão — cole a URL diretamente.
  • A URL deve retornar um conteúdo de imagem válido (ex.: png, jpg, webp).

Exemplos

Válidos:

https://images.unsplash.com/photo-.../w=1200
https://meu-cdn.exemplo.com/produtos/sofa-3l.webp

Inválidos:

string
/caminho/local/arquivo.png
https://example.com/pagina.html

Dicas

  • Preencha o campo “Alt” para acessibilidade e SEO.
  • Marque “Principal” para a imagem que deve aparecer primeiro na vitrine.
  • Use “Posição” para ordenar as imagens (0 = primeiro).
  • Prefira dimensões a partir de 800px no menor lado e formatos otimizados (WebP/JPEG de qualidade).

Observação sobre testes (mocks de imagem)

  • Nos testes E2E usamos URLs do Picsum (https://picsum.photos/seed/.../LxA) para gerar imagens determinísticas.
  • Essas URLs são apenas mocks e podem não ter propriedades ideais de SEO/A11y; em produção use um CDN próprio.
  • Veja apps/web-e2e/cypress/support/commands.ts (imageUrl/typeImageUrl).

Exemplos prontos (copiar e colar)

Use estes exemplos de URLs de imagem (mock) para cadastrar rapidamente e visualizar no preview. Eles são públicos e estáveis, mas servem apenas para testes.

https://picsum.photos/seed/pdpx-1/1200/800
https://picsum.photos/seed/pdpx-2/1200/800
https://picsum.photos/seed/pdpx-3/1200/800

Pré-visualização:

Exemplo 1Exemplo 2Exemplo 3

Exemplo do menu disponível no canto superior direito (perfil, admin, pedidos, sair):

Menu do usuário dropdown