Teste Automatizado Banner Basic

Como criar o Componente Banner Basic

Tutorial

Componente Banner aceita os itens abaixo:

- Link: Interno ou Externo, abertura na mesma aba ou nova aba;

- Imagem em formato JPG: Padrão (1920x420px) Tablet (768x720px) Mobile (360x812px ou 390x844px).
- No menu "Opções" da página onde queira adicionar o Banner desejado, existe a possibilidade de habilitar a imagem pra ficar dentro do grid. Esta opção é válida apenas para o Banner Basic. Esta é nossa opção antiga do Imagem com Link.

Recomendação de tamanho de imagens nos componentes:
Banner basic Intervenção (‪600 x 400‬ e ‪352 x 440‬ )
Banner basic Maior (1920x600 e 768x853)
Banner basic na Grid (1120x380 e 768x480)
Banner basic Padrão (1920x420 e 768x870)
Banner custom (1920 x 600 e mobile 768 x 853)
Card de vendas (‪266 x 350‬)
Card horizontal G (570 x 380)
Card horizontal M (456 x 304)
Card horizontal P (319 x 213)
Card institucional (266 x 355)
Double card (250x398) ou (250x250)
Mosaico com 3 (380 x 490)
Selo banner (75 x 75)
Selo card de vendas (264 x 52)
Selo normal para card de vendas (266 x 350)
Tab select (200 x 134)
Navegar em: Conteúdo>Conteúdos Compartilhados>Banner>Itens>Basic>clicar em +Item
1 - Inserir o nome do arquivo, que deve seguir a semântica:

2 - Nome do componente

3 - Caminho de onde se encontra o componente, Se PF ou PJ, tudo minúsculo e separados por hífen:

Ex: item-componente-Banner-home-pf>Clicar em>Salvar
4 - Será exibida a tela com os Campos "Imagem" e "Link" para preenchimento, sendo o campo imagem como sendo obrigatório
5 - Preencher os campos obrigatórios>Salvar>Publicar
Navegar em: Conteúdo>Conteúdos Compartilhados>Links>Clicar em +Item e inserir o nome do arquivo

O nome do arquivo deve seguir a semântica:

1 - Nome do link, se interno, externo, modal

2 - Nome do componente

3 - Caminho de onde se encontra o componente, tudo minúsculo e separados por hífen, se pf ou pj:

Ex: link-interno-banner-home-pf> Salvar
4 - O sistema exibe a tela para preenchimento dos campos para o Link
5 - Preencher campos obrigatórios
6 - Para o campo "URL" escolha onde o seu link para o banner será aberto, se "Link Interno" ou "URL" (não esquecer de colocar o caminho completo iniciando em "https://..." ou "Asset" (este quando for usar para criação do "Tutorial Componente", verificar no manual como criar), podemos selecionar um já existente nos combos apresentados para cada componente ou até mesmo copiar um(Veja no Indice deste manual "Como copiar Componentes">Salvar>Publicar
Navegar em: Conteúdo>Conteúdos Compartilhados>Imagens>Clicar em +Item e inserir o nome do arquivo
O nome do arquivo deve seguir a semântica:

1 - Nome imagem

2 - Nome do componente

3 - Caminho de onde se encontra o componente, tudo minúsculo e separados por hífen, se pf ou pj:
Ex: "img-banner-banda-larga-pf". Salvar>Do lado direto da tela será exibido as opções para fazer upload das imagens, sendo:

Padrão, Mobile e Tablet>Clicar em "Upload New" para cada imagem>Preencher campos obrigatórios>Salvar>Publicar

- As imagens não devem ter mais o atributo aria-hidden=true/false

- Para definir uma imagem como meramente ilustrativa, basta deixar o atributo alt vazio; ex: alt=""

- Exceção Links: Quando a imagem é único filho de um link, ela NÃO PODE ser considerada meramente ilustrativa e seu conteúdo deve ser informado ao - usuário, mesmo que o link tenha title ou aria-label.

- Caso essas determinações não sejam cumpridas, será gerado erro no Wave, como é o caso do Logo do Menu, hoje, em produção (corrigi nesta história)

*Realizamos a implementação de melhorias com objetivo de melhorar a qualidade das peças sem impactar negativamente o APDEX, contribuindo para uma melhor experiência dos usuários nos sites impactados.

Qualidade da Imagem Padrão:

100%

75%

60%

50%

Natural (Renderiza a imagem com mesmo peso e qualidade da imagem igual a do computador de quem a subiu)
Navegar em: Conteúdo>Conteúdos Compartilhados>Banner>Listas>Clicar em +Item e inserir o nome do arquivo
O nome do arquivo deve seguir a semântica:

1 - Nome do componente

2 - Caminho de onde se encontra o componente, tudo minúsculo e separados por hífen, se pf ou pj:
Ex: "lista-img-banner-banda-larga-pf". Salvar>
3 - Inserir do lado direito da tela no campo "Itens de Banner", os itens criados anteriormente que farão parte do Carrossel de Banners>Salvar>Publicar.
1- Acessar a página que irá receber o componente em "Home > Site"; (Ver no índice deste manual o item "Como criar página no storyblok)

2- Na aba "Geral", clicar em "+Adicionar bloco";

3- Selecionar na lista, o item "Banner" criado anteriormente;

4- Isso irá criar um bloco com o nome "Banner. Clicar nele;

5- Na aba "Geral", clicar em "Selecionar" e na caixa em branco de "Selecionar Banner";

6- Isso ira exibir uma lista com os itens de Banner. Clique no Banner desejado;

7- Se desejar inserir um Titulo, subtítulo e rodapé para o bloco criado, clicar na aba "Opções" e em "Propriedades Avançadas" e inserir os valor nos respectivos campos.

8- Clicar em "Salvar" e "Publicar"
A partir do Item de banner já criado na página desejada no menu "Opções" abaixo do período de vigência são exibidos os campos:

1 - "Contador": com a opção de habilitar
2 - "Título": esta informação será exibida acima do contador quando preenchida

3 - "Período de Vigência": Para que o Contador funcione corretamente é necessário selecioner data ou perído no campo "Período de Vigência", programando a vigência do contador Inicio e fim (Campo obrigatório)
3 - Assim que os itens 1 e 2 e 3 forem preenchidos já no preview conseguimos visualizar o contador automaticamente>Salvar>Publicar

OBS: Quando o contador for maior ou igual a 24 horas, ele exibe o formato em dias: “1 Dia ou 2 Dias”

Dica: Quando formos usar o botão no banner sempre usarmos o botão de vendas (amarelo), pois o branco ou vermelho fica um pouco estranho.