Closed github-learning-lab[bot] closed 3 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::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
: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
Pie de Página
:sparkles: Branch: footer
Introducción
En este paso, vamos a aprender cómo crear un componente que comúnmente se considera poco importante, pero que es fundamental para dar al usuario una buena experiencia: el footer.
Pocos usuarios se desplazan hasta el footer. Sin embargo, esa parte que llega puede estar buscando información que normalmente se encuentra en este bloque, como enlaces a medios sociales y medios de pago aceptados por la tienda. También puede contener páginas personalizadas que dirigen al sitio de oportunidades laborales de la empresa, soporte al cliente y menús de categorías.
FOTO Footer
Configurando el Footer
El bloque de Footer, al igual que el bloque de Header, es responsivo. Esto significa que puede configurarse para que se adapte a diferentes dispositivos, como desktop y mobile.
A continuación, podemos ver un ejemplo de implementación de Footer para desktop:
Actividad
Ahora, vamos a configurar un footer para la página inicial de su tienda, teniendo en cuenta el código de ejemplo presentado anteriormente para desktop y mobile.
No vamos a implementar el menú en esta actividad, porque ya fue visto en el contexto de Header. Cubriremos los casos de medios de pago aceptados y redes sociales de la tienda.
En el archivo
footer.jsonc
, copie el código anterior para utilizarlo en su tema.Declare el siguiente bloque en seguida:
Basado en el bloque anterior, construya el
flex-layout.col#footer-left-desktop
con el siguiente children:accepted-payment-methods
.Ahora construya el bloque
accepted-payment-methods
con los siguientes medios de pago:MasterCard
,Visa
yDiners Club
. Solo para mostrar un poco más de conocimiento, descubra también cómo mostrar los medios de pago en colores en esta documentación.En el próximo paso vamos a usar el bloque
social-networks
para mostrar las redes sociales de nuestra tienda. Consulte en la documentación cómo hacer esto. E implemente como children del bloqueflex-layout.col#footer-right-desktop
. Queremos mostrarFacebook
,Instagram
yTwitter
.Ahora, haga que los logos de las redes sociales aparezcan con colores, como lo menciona la documentación del footer.
:information_source: Recuerde acceder a la documentación del Footer si tiene alguna duda durante la actividad.
Resultado esperado:
:no_entry_sign: ¿Perdido?
¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? :pray:
Crear feedback
Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.
¡Muy bien!
Este es el último paso del curso de Store Framework. Lo has hecho excelente y esperamos que hayas aprendido bastante hasta ahora. ¡Felicitaciones!
Si aún deseas continuar aprendiendo más sobre cómo desarrollar utilizando VTEX IO, te animamos a empezar nuestro próximo curso, que se centra en enseñar cómo desarrollar bloques personalizados para VTEX Store Framework. Puedes encontrarlo en: Store Block Course on Learning Lab.