Closed github-learning-lab[bot] closed 4 years ago
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark:
:white_check_mark: Getting the file
:white_check_mark: Add a flex-layout.row
inside of footer-layout.desktop
:white_check_mark: Add flex-layout.col#footer-left-desktop
inside of flex-layout.row#footer-1-desktop
:white_check_mark: Add flex-layout.col#footer-right-desktop
inside of flex-layout.row#footer-1-desktop
:white_check_mark: accepted-payment-methods
inside of flex-layout.col#footer-left-desktop
:x: Couldn't find the required props in accepted-payment-methods
:white_check_mark: social-networks
inside of flex-layout.col#footer-right-desktop
:white_check_mark: props of social-networks
are properly configured
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark:
:white_check_mark: Getting the file
:white_check_mark: Add a flex-layout.row
inside of footer-layout.desktop
:white_check_mark: Add flex-layout.col#footer-left-desktop
inside of flex-layout.row#footer-1-desktop
:white_check_mark: Add flex-layout.col#footer-right-desktop
inside of flex-layout.row#footer-1-desktop
:white_check_mark: accepted-payment-methods
inside of flex-layout.col#footer-left-desktop
:x: Couldn't find the required props in accepted-payment-methods
:white_check_mark: social-networks
inside of flex-layout.col#footer-right-desktop
:white_check_mark: props of social-networks
are properly configured
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark:
:white_check_mark: Getting the file
:white_check_mark: Add a flex-layout.row
inside of footer-layout.desktop
:white_check_mark: Add flex-layout.col#footer-left-desktop
inside of flex-layout.row#footer-1-desktop
:white_check_mark: Add flex-layout.col#footer-right-desktop
inside of flex-layout.row#footer-1-desktop
:white_check_mark: accepted-payment-methods
inside of flex-layout.col#footer-left-desktop
:x: Couldn't find the required props in accepted-payment-methods
:white_check_mark: social-networks
inside of flex-layout.col#footer-right-desktop
:white_check_mark: props of social-networks
are properly configured
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting the file
:white_check_mark: Add a flex-layout.row
inside of footer-layout.desktop
:white_check_mark: Add flex-layout.col#footer-left-desktop
inside of flex-layout.row#footer-1-desktop
:white_check_mark: Add flex-layout.col#footer-right-desktop
inside of flex-layout.row#footer-1-desktop
:white_check_mark: accepted-payment-methods
inside of flex-layout.col#footer-left-desktop
:white_check_mark: props of accepted-payment-methods
are properly configured
:white_check_mark: social-networks
inside of flex-layout.col#footer-right-desktop
:white_check_mark: props of social-networks
are properly configured
Rodapé
:sparkles: Branch: footer
Introdução
Neste passo, iremos aprender como criar um componente que é comumente visto como pouco relevante, mas que é fundamental para dar uma boa experiência ao usuário: o footer.
Poucos usuários chegam a scrollar até o footer. Porém, essa parcela que chega pode estar procurando informações que usualmente são abrigadas neste bloco, como links para mídias sociais e meios de pagamento aceitos pela loja. Ele também pode abrigar páginas customizadas que direcionam ao site de vagas da empresa, suporte ao cliente e menus de categorias.
FOTO Footer
Configurando o Footer
O bloco do Footer, assim como o do header, é responsivo. Isso significa que ele pode ser configurado para se adaptar a diferentes dispositivos, como desktop e mobile.
Abaixo, podemos conferir um exemplo de implementação do Footer para desktop:
Atividade
Agora, vamos configurar um footer para a página inicial da sua loja, levando em consideração o código exemplo apresentado acima para desktop e mobile.
Não implementaremos o menu nessa atividade, pois ele já foi visto no contexto do Header. Iremos cobrir os casos de meios de pagamento aceitos e redes sociais da loja.
No arquivo
footer.jsonc
, copie o código acima para usá-lo no seu tema;Declare o seguinte bloco em seguida:
Com base no bloco acima, construa o
flex-layout.col#footer-left-desktop
com a seguinte children:accepted-payment-methods
;Agora construa o bloco
accepted-payment-methods
com os seguintes meios de pagamento:MasterCard
,Visa
eDiners Club
. Só para mostrar um pouco mais de conhecimento, descubra também como mostrar os meios de pagamento em cores nesta documentação;No próximo passo iremos usar o bloco
social-networks
para mostrar as redes sociais da nossa loja. Veja na documentação como fazer isso. E implemente como children do blocoflex-layout.col#footer-right-desktop
. Nós queremos mostrarFacebook
,Instagram
eTwitter
.Agora, faça os logos das redes sociais aparecerem com cores, como a documentação do footer menciona.
:information_source: Lembre-se de acessar a documentação do Footer caso tenha alguma dúvida durante a atividade.
Resultado esperado:
: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.
Muito bem!
Esse é o último passo do curse de Store Framework, você fez muito bem e esperamos que tenha aprendido bastante até esse momento. Parabéns!
Se você deseja continuar aprendendo mais em como desenvolver utilizando o VTEX IO, nós o encorajamos a começar nosso próximo curso, que foca em ensinar como desenvolver blocos customizados para o VTEX Store Framework. Você pode encontrá-lo em: Store Block Course on Learning Lab.