Título Teste Automatizado Card
Como criar o Componente Card
Tutorial
- O Componente aceita os itens abaixo:- Imagem (mobile 266X266px e desktop 266X500px) ou ícone;- Bill offer;- Topico horizontal;- Highlight- Titulo- Subtitulo- Texto rico- Botao - link interno, externo, modal multimedia, click to call (Telefone), modal forms (CEP), link ancora- Link arrow - link interno, externo, modal multimidio, click to call (Telefone), modal forms (CEP), link ancora
Obs: Agora o Componente Card aceita vídeo, no cadastro do Storyblok temos um campo para inserí-lo, lembrando que ícone e imagens são soberanos, ou seja, caso estes estejam preenchidos o vídeo não será renderizado.
Regras de funcionamento:- Swiper-button de seleção de cards direita e esquerda - No desktop só exibido com 5 cards ou mais. Não deve ser exibido com total de cards entre 1 e 4.- Swiper-button de seleção de cards direita e esquerda - No mobile só exibido com 2 cards ou mais. Não deve ser exibido com total de 1 cards.- Imagem tamanho - A largura recomendada tanto para mobile quanto em desktop deve ser 266px. A altura pode variar. Ex: 266X174px ou 266X500px- Icone - Se houver imagem cadastrada, o sistema exibira apenas o ícone. A imagem será ignorada.- Layout - Padrão ou Inverso somente na cor vermelha. A Opção de Layout está no menu "Opções" na página onde o seu card será inserido. - Navegar em: Conteúdo>Conteúdos Compartilhados>Card>Itens>Clicar em +Item e inserir o nome do arquivoO nome do arquivo deve seguir a semântica:1 - Nome do componente2 - Caminho de onde se encontra o componente, tudo minúsculo e separados por hífen, se pf ou pj:Ex: item-card-zigzag-home-produtos-fone-fixo-pj >Salvar3 - Preencher os campos necessários que irá compor o Card do seu ZigZag.Caso o seu componente levar Imagem, Tópico Horizontal, Link Arrow, Preço e Botão, tem que cadastrá-los antes ou copiar já um existente (Ver no Índice do Manual "Como copiar componentes") e preenchê-los nos campos necessários>Salvar>Publicar
- Navegar em: Conteúdo>Conteúdos Compartilhados>Card>Listas>Clicar em +Item e inserir o nome do arquivoO nome do arquivo deve seguir a semântica:1 - Nome do componente2 - Caminho de onde se encontra o componente, tudo minúsculo e separados por hífen, se pf ou pj:Ex: lista-card-zigzag-home-produtos-fone-fixo-pj >Salvar3 - Inserir do lado direito da tela no campo "Itens de Card", os itens criados que farão parte do seu Card>Salvar>Publicar.
- Navegar em: Conteúdo>Conteúdos Compartilhados>Links>Clicar em +Item e inserir o nome do arquivoO nome do arquivo deve seguir a semântica:1 - Nome do link, se interno, externo, modal2 - Nome do componente3 - Caminho de onde se encontra o componente, tudo minúsculo e separados por hífen, se pf ou pj:Ex: link-interno-institucional-home-produtos-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 card 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 imagem2 - Nome do componente3 - Caminho de onde se encontra o componente, tudo minúsculo e separados por hífen, se pf ou pj: Ex: "img-card-banda-larga-pj". Salvar>
4 - 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 - 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 "Card" criado anteriormente;4- Isso irá criar um bloco com o nome "Card vazio". Clicar nele;5- Na aba "Geral", clicar em "Selecionar" e na caixa em branco de "Selecionar Card";6- Isso ira exibir uma lista com os itens de Card. Clique no Card Item 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"
- O Contador é exibido na parte superior do card e tem as seguintes configurações:
1 - Se usarmos o tamanho do contador SM e MD o card irá exibir o campo "texto contador 1";2 - Se usarmos o tamanho do contador LG o card irá exibir em duas linhas o campo "texto contador 2" e o tempo na linha de baixo;
3 - Quando o contador for maior ou igual a 24 horas, o card irá exibir o formato em dias: “1 Dia ou 2 Dias”.
OBS: O contador é cadastrado somente no Item do Card no menu "Opções" que está abaixo do período de vigência. - Navegar em: Conteúdo>Conteúdos Compartilhados>Card>Item>Clicar em +Item
1 - Inserir o nome do arquivo, que deve seguir a semântica:2 - Nome do componente3 - Caminho de onde se encontra o componente, se PF ou PJ, tudo minúsculo e separados por hífen:Ex: componente-card-home-pj>Clicar em Salvar
A partir do Item de Card já criado no menu "Opções" abaixo do perído de vigência são exibidos os campos:
1 - Contador com a opção de habilitar
2 - Tamanho do contador (Obrigatório) com as opções "SM", "MD" e "LG"
3 - Tamanho do contador 1 (usando o tamanho do contador SM e MD só exibe o campo "texto contador 1")4 - Tamanho do contador 2 (usando o tamanho do contador LG exibe em duas linhas o campo "texto contador 2" e o tempo na linha de baixo.
OBS: 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)Quando o contador for maior ou igual a 24 horas, ele exibe o formato em dias: “1 Dia ou 2 Dias”
Título Card 1
Subtítulo Card 1 - Layout default
)
Highlight Card
Título Card Full 06
Subtítulo Card
[FULL] lorem ipsum dolor sit.
- texto negrito meio
- inicio texto negrito e e fim;
- meio texto negrito.
R$ 39.99
R$9.99,
Dynamic Price ID Vázio
Highlight Card
Título Card Full 07
Subtítulo Card
[FULL] lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora
R$99,99
Sufixo
Título Card Full 08
[FULL] lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora
Rodapé 1 - ID Link âncora: CARD-ANCORA-01 link =>
Título Card 2
Subtítulo Card 2 - Layout default
Rodapé 2 - ID Link âncora: CARD-ANCORA-02 link =>
Título Card 3
Subtítulo Card 3 - Layout default
)
Título Card 19
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Título Card 20
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Título Card 21
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Título Card 22
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi modal blank
Título Card 23
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Título Card 24
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Título Card 25
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Título Card 26
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Título Card 27
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Título Card 4
Subtítulo Card 4 - Layout default
Rodapé 4 - ID Link âncora: CARD-ANCORA-04
Título Card 5
Subtítulo Card 5 - Layout default
Rodapé 5 - ID Link âncora: CARD-ANCORA-05
Título Card 6
Subtítulo Card 6 - Layout inverso
Rodapé 6 - ID Link âncora: CARD-ANCORA-06
Título Card 7
Subtítulo Card 7 - Layout default
Título Card 55
Subtítulo Card
lorem ipsum dolor sit amet consectetur adipiscing elit
- luctus faucibus
- vehicula litora taciti sem ante
- morbi tristique viverra diam
Prefixo
R$99.999,99
Sufixo
Título Card 56
Subtítulo Card
lorem ipsum dolor sit amet consectetur adipiscing elit
- luctus faucibus
- vehicula litora taciti sem ante
- morbi tristique viverra diam
De R$ 8.999,99
R$9.999,99
Sufixo
Título Card 57
Subtítulo Card
lorem ipsum dolor sit amet consectetur adipiscing elit
- luctus faucibus
- vehicula litora taciti sem ante
- morbi tristique viverra diam
Prefixo
R$999,99
Sufixo
Título Card 58
Subtítulo Card
lorem ipsum dolor sit amet consectetur adipiscing elit
- luctus faucibus
- vehicula litora taciti sem ante
- morbi tristique viverra diam
R$99,99
Sufixo
Título Card 59
Subtítulo Card
lorem ipsum dolor sit amet consectetur adipiscing elit
- luctus faucibus
- vehicula litora taciti sem ante
- morbi tristique viverra diam
Prefixo R$8,99
R$9,99
Sufixo
Título Card 60
Subtítulo Card
lorem ipsum dolor sit amet consectetur adipiscing elit
- luctus faucibus
- vehicula litora taciti sem ante
- morbi tristique viverra diam
Prefixo
R$99.999,99
Sufixo
Título Card 61
Subtítulo Card
lorem ipsum dolor sit amet consectetur adipiscing elit
- luctus faucibus
- vehicula litora taciti sem ante
- morbi tristique viverra diam
De R$ 8.999,99
R$9.999,99
Sufixo
Título Card 62
Subtítulo Card
lorem ipsum dolor sit amet consectetur adipiscing elit
- luctus faucibus
- vehicula litora taciti sem ante
- morbi tristique viverra diam
Prefixo
R$999,99
Sufixo
Título Card 63
Subtítulo Card
lorem ipsum dolor sit amet consectetur adipiscing elit
- luctus faucibus
- vehicula litora taciti sem ante
- morbi tristique viverra diam
R$99,99
Sufixo
Rodapé 7 - ID Link âncora: CARD-ANCORA-07
Título Card 8
Subtítulo Card 8 - Layout default
Título Card 64
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Título Card 65
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Título Card 66
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Título Card 67
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Título Card 68
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Título Card 69
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Título Card 70
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Título Card 71
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Título Card 72
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Rodapé 8 - ID Link âncora: CARD-ANCORA-08
Título Card 9
Subtítulo Card 9 - Layout default
Highlight
Título Card 73
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Prefixo
R$999,99
Sufixo
Highlight
Título Card 74
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
De R$ 8.999,99
R$9.999,99
Sufixo
Highlight
Título Card 75
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Prefixo
R$99.999,99
Sufixo
Highlight
Título Card 76
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Prefixo R$8,99
R$9,99
Sufixo
Highlight
Título Card 77
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
R$99,99
Sufixo
Highlight
Título Card 78
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Prefixo
R$999,99
Sufixo
Highlight
Título Card 79
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
De R$ 8.999,99
R$9.999,99
Sufixo
Highlight
Título Card 80
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Prefixo R$8,99
R$9,99
Sufixo
Highlight
Título Card 81
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
R$99,99
Sufixo
Highlight
Título Card 82
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
R$99,99
Sufixo
Rodapé 9 - ID Link âncora: CARD-ANCORA-09
Título Card Full 10
Subtítulo Card 10 - Layout Inverse (Vermelho)
Highlight Card
Título Card Full 06
Subtítulo Card
[FULL] lorem ipsum dolor sit.
- texto negrito meio
- inicio texto negrito e e fim;
- meio texto negrito.
R$ 39.99
R$9.99,
Dynamic Price ID Vázio
Highlight Card
Título Card Full 07
Subtítulo Card
[FULL] lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora
R$99,99
Sufixo
Título Card Full 08
[FULL] lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora
Rodapé 10 - ID Link âncora: CARD-ANCORA-10
Título Card 11
Subtítulo Card 11 - Layout default - Teste swiper mobile - 1 card
Título Card 64
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Rodapé 11 - ID Link âncora: CARD-ANCORA-11
Título Card 12
Subtítulo Card 12 - Layout inverse - Teste swiper desktop - 4 cards
Rodapé 12 - ID Link âncora: CARD-ANCORA-12
Título Card 13
Subtítulo Card 13 - Layout default - Teste com vídeos
)
Highlight Card
Título Card Full 01
Subtítulo Card
[FULL] lorem ipsum dolor sit.
- texto negrito meio
- inicio texto negrito fim
- meio texto negrito
Prefixo R$8,99
R$9,99
Sufixo
)
Título Card Full 02
Subtítulo Card
[FULL] lorem ipsum dolor sit.
- inicio meio texto negrito;
- inicio texto negrito fim;
- texto negrito meio fim.
R$99,99
Sufixo
)
Highlight Card
Subtítulo Card
[FULL] lorem ipsum dolor sit.
- meio fim;
- inicio fim;
- inicio meio
Prefixo
R$999,99
Sufixo
)
Highlight Card
Título Card Full 04
[FULL] lorem ipsum dolor sit.
- inicio meio
- inicio fim;
- meio fim.
De R$ 8.999,99
R$9.999,99
Sufixo
)
Highlight Card
Título Card Full 05
Subtítulo Card
Prefixo
R$99.999,99
Sufixo
Highlight Card
Título Card Full 06
Subtítulo Card
[FULL] lorem ipsum dolor sit.
- texto negrito meio
- inicio texto negrito e e fim;
- meio texto negrito.
R$ 39.99
R$9.99,
Dynamic Price ID Vázio
Highlight Card
Título Card Full 07
Subtítulo Card
[FULL] lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora
R$99,99
Sufixo
Título Card Full 08
[FULL] lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora
Rodapé 13 - Layout default - Teste com vídeos
Título Card 14
Subtítulo Card 14 - Layout inverse - Teste swiper desktop - 4 cards
Título Card 46
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Título Card 47
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
lorem ipsum dolor sit amet consectetur
lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam
Rodapé 14 - ID Link âncora: CARD-ANCORA-14