Footer #25
Description
Pie de Página
✨ 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:
{
"footer": {
"blocks": ["footer-layout.desktop"]
},
"footer-layout.desktop": {
"children": [
"flex-layout.row#footer-1-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:
"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
}
}-
Basado en el bloque anterior, construya el
flex-layout.col#footer-left-desktopcon el siguiente children:accepted-payment-methods. -
Ahora construya el bloque
accepted-payment-methodscon los siguientes medios de pago:MasterCard,VisayDiners 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-networkspara 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,InstagramyTwitter. -
Ahora, haga que los logos de las redes sociales aparezcan con colores, como lo menciona la documentación del footer.
ℹ️ Recuerde acceder a la documentación del Footer si tiene alguna duda durante la actividad.
Resultado esperado:
🚫 ¿Perdido?
¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? 🙏
Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.