Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::white_check_mark::white_check_mark::x:
:white_check_mark: Code compilation :white_check_mark: Define two info cards in the home block :white_check_mark: Declare info-card#button-right and info-card#button-left :x: You didn't use the info-card properties we're expecting
:white_check_mark::white_check_mark::white_check_mark::x:
:white_check_mark: Code compilation :white_check_mark: Define two info cards in the home block :white_check_mark: Declare info-card#button-right and info-card#button-left :x: You didn't use the info-card properties we're expecting
:white_check_mark::x::x::x:
:white_check_mark: Code compilation
:x: Home block doesn't have info-card#button-right or info-card#button-left
:x: Your blocks.jsonc
file is missing either info-card#button-right or info-card#button-left
:x: You didn't use the info-card properties we're expecting
:white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Code compilation :white_check_mark: Define two info cards in the home block :white_check_mark: Declare info-card#button-right and info-card#button-left :white_check_mark: Define the correct info card properties
Info Card: o call to action do Store Framework
:sparkles: Branch: infocard
Introdução
Uma loja precisa de uma boa home page para manter a atenção do usuário, aumentando o tempo de sessão e, portanto, aumentando as chances de conversão. Para que isso seja possível, vários elementos podem ser usados, como: banners promocionais, prateleiras de destaque, conteúdos institucionais.
Criaremos o próximo bloco na home page usando um Call to Action. No Store Framework, temos um bloco que serve para esse propósito chamado Info Card.
Info Card
Com o Info Card, é possível criar imagens com links e botões (no topo ou na lateral do bloco) que direcionem o fluxo do usuário (Call to Action).
Olhando a documentação é possível ver que:
isFullModeStyle
define se o Call to Action (CTA) deve estar acima do banner;textPosition
definirá a posição do texto;textAlignment
definirá o alinhamento do texto;imageUrl
definirá qual imagem será usada como banner;headline
determinará qual o texto que será usado de título;callToActionMode
possibilitará a escolha do CTA como sendo um link ou um botão;callToActionText
definirá o texto do CTA;callToActionUrl
determinará o link ao qual será redirecionado;Ficamos, assim, com as seguintes props:
Instanciando blocos
Pode ser que você tenha se perguntado:
Isso é possível através da instanciação de blocos.
Todos os blocos têm nomes preestabelecidos, mas você pode criar instâncias deles e definir aparências diferentes para um mesmo tipo de bloco. Para fazer isso, basta colocar um
#
com um nome arbitrário e que faça sentido depois da definição de cada bloco, por exemplo:Atividade
A partir do código acima, no arquivo
home.jsonc
, crie oinfo-card#button-left
logo abaixo do infocardinfo-card#button-right
. Este novo infocard deve possuir:Shining chrome
Go to Collection
no lugar do botaohttps://appliancetheme.vteximg.com.br/arquivos/cozinha-cinza-min.png
Give your kitchen a cool style adding warm metallic finishes.<br>Available until January 2020.
textPosition
).O resultado esperado é semelhante ao apresentado na imagem abaixo:
:information_source: Lembre-se de acessar a documentação do Info Card caso tenha alguma dúvida durante a atividade.
:no_entry_sign: Perdido?
Há algum problema com esse passo? Que tal nos enviar um feedback? :pray:
Criar feedback
Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.