Footer

[github-learning-lab[bot]]

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:

{
  "footer": {
    "blocks": ["footer-layout.desktop"]
  },
  "footer-layout.desktop": {
    "children": [
      "flex-layout.row#footer-1-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.

1. No arquivo footer.jsonc, copie o código acima para usá-lo no seu tema;

2. Declare o seguinte bloco em seguida:

     "flex-layout.row#footer-1-desktop": {
       "children": [
         "flex-layout.col#footer-left-desktop",
         "flex-layout.col#footer-right-desktop"
       ],
       "props": {
         "blockClass": "footer-row",
         "paddingTop": 7,
         "paddingBottom": 7
       }
     }

3. Com base no bloco acima, construa o flex-layout.col#footer-left-desktop com a seguinte children: accepted-payment-methods;

4. Agora construa o bloco accepted-payment-methods com os seguintes meios de pagamento: MasterCard, Visa e Diners Club. Só para mostrar um pouco mais de conhecimento, descubra também como mostrar os meios de pagamento em cores nesta documentação;

5. 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 bloco flex-layout.col#footer-right-desktop. Nós queremos mostrar Facebook, Instagram e Twitter.

6. 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.

[vtex-course-hub[bot]]

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

: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

[vtex-course-hub[bot]]

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

: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