claudiomborges / store-framework

https://lab.github.com/vtex-trainings/store-framework
0 stars 0 forks source link

Footer #25

Open github-learning-lab[bot] opened 3 years ago

github-learning-lab[bot] commented 3 years ago

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: image


: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] commented 3 years ago

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