Teste Automatizado Shortcut

Como criar o Componente Shortcut

Tutorial

  • Componente Shortcut aceita os itens abaixo:
     - Título
     - Texto Acessível
     - Rótulo para o Google Analytics
     - Link Interno ou Externo e Link Modal, abertura na mesma aba ou nova aba
     - Ícone Mondrian
     - Layout Default: Shortcut vermelho e fundo branco
     - Layout Secondary: Shortcut branco e fundo branco
     - Layout Inverse: Shortcut branco e fundo vermelho
    Obs: As informações de layout estão no menu "Opções" da página onde seu Shortcut será inserido.
     - No Desktop o Shortcut é exibido um ao lado do outro
     - No Mobile usando 4 Shortcuts é exibido 2 em cima e 2 embaixo
     
  • Navegar em: Conteúdo>Conteúdos Compartilhados>Links>Clicar em +Item, 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-shorcut-home-produtos-banda-larga-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 do Shortcut 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>Shortcut>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-shortcut-home-produtos-fone-fixo-pf >Preencher campos obrigatórios>Salvar
    3 - Será exibida a tela Lista de Shortcuts
    4 - Selecionar o link de Shortcut criado anteriormente>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 "Shortcut " criado anteriormente;
    4- Isso irá criar um bloco com o nome "Shortcut  vazio". Clicar nele;
    5- Na aba "Geral", clicar em "Selecionar" e na caixa em branco de "Selecionar Shortcut ";
    6- Isso ira exibir uma lista com os itens de Shortcut . Clique no Shortcut  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"

1) Título Shortcut Icon Layout Default

Subtítulo Shortcut

Rodapé Shortcut

2) Título Shortcut Icon Layout Secondary

Subtítulo Shortcut

Rodapé Shortcut

3) Título Shortcut Icon Layout Inverse

Subtítulo Shortcut

Rodapé Shortcut

4) Título Shortcut Icon Layout Inverse

Subtítulo Shortcut

Rodapé Shortcut

5) Título Shortcut Icon Layout Secondary

Subtítulo Shortcut

Rodapé Shortcut

6) Título Shortcut Icon Secondary Border

Subtítulo Shortcut

Rodapé Shortcut

7) Título Shortcut Icon Secondary

Subtítulo Shortcut

Rodapé Shortcut

8) Título Shortcut Icon Inverse

Subtítulo Shortcut

Rodapé Shortcut

9) Título Shortcut Icon Default

Subtítulo Shortcut

Rodapé Shortcut

10) Título Shortcut Icon Layout Default Com Imagem

Subtítulo Shortcut

Rodapé Shortcut

11) Título Shortcut Icon Layout Inverse com Gif

Subtítulo Shortcut

Rodapé Shortcut

12) Título Shortcut Icon Layout Default - Shortcut Hat ativado

Subtítulo Shortcut

Rodapé Shortcut

13) Título Shortcut Icon Layout Inverse - Shortcut Hat ativado

Subtítulo Shortcut

Rodapé Shortcut

14) Título Shortcut Icon Layout Secondary - Shortcut Hat ativado

Subtítulo Shortcut

Rodapé Shortcut

15) Título Shortcut Icon - Layout Default - Teste de todos os tipos de links

Subtítulo Shortcut

Rodapé