Footer

[github-learning-lab]

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.

1. En el archivo footer.jsonc, copie el código anterior para utilizarlo en su tema.
2. 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
    }
  }

3. Basado en el bloque anterior, construya el flex-layout.col#footer-left-desktop con el siguiente children: accepted-payment-methods .

4. Ahora construya el bloque accepted-payment-methods con los siguientes medios de pago: MasterCard, Visa y Diners 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.

5. 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 bloque flex-layout.col#footer-right-desktop . Queremos mostrar Facebook, Instagram y Twitter .

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

Crear feedback

---

Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.

[vtex-course-hub]

Oopsie, something went wrong 😿

Results

✅✅✅✅❌✅❌

Tests

✅ Add a flex-layout.row inside of footer-layout.desktop
✅ Add flex-layout.col#footer-left-desktop inside of flex-layout.row#footer-1-desktop
✅ Add flex-layout.col#footer-right-desktop inside of flex-layout.row#footer-1-desktop
✅ accepted-payment-methods inside of flex-layout.col#footer-left-desktop
❌ Couldn't find the required props in accepted-payment-methods
✅ social-networks inside of flex-layout.col#footer-right-desktop
❌ Couldn't find the required props in social-networks

Try again 😁

[vtex-course-hub]

Oopsie, something went wrong 😿

Results

✅✅✅✅✅✅❌

Tests

✅ Add a flex-layout.row inside of footer-layout.desktop
✅ Add flex-layout.col#footer-left-desktop inside of flex-layout.row#footer-1-desktop
✅ Add flex-layout.col#footer-right-desktop inside of flex-layout.row#footer-1-desktop
✅ accepted-payment-methods inside of flex-layout.col#footer-left-desktop
✅ props of accepted-payment-methods are properly configured
✅ social-networks inside of flex-layout.col#footer-right-desktop
❌ Couldn't find the required props in social-networks

Try again 😁

[vtex-course-hub]

You did great! 😁

Results

✅✅✅✅✅✅✅

Tests

✅ Add a flex-layout.row inside of footer-layout.desktop
✅ Add flex-layout.col#footer-left-desktop inside of flex-layout.row#footer-1-desktop
✅ Add flex-layout.col#footer-right-desktop inside of flex-layout.row#footer-1-desktop
✅ accepted-payment-methods inside of flex-layout.col#footer-left-desktop
✅ props of accepted-payment-methods are properly configured
✅ social-networks inside of flex-layout.col#footer-right-desktop
✅ props of social-networks are properly configured