Advanced menu with Flex Layout

[github-learning-lab[bot]]

Menú avanzado con Flex Layout

:sparkles: Branch: menuflex

Introducción

Como vimos en el último paso, un Submenú acepta como children cualquier bloque del Store Framework.

A partir de este entendimiento, podemos mejorar la configuración del Menú realizada en la actividad anterior, aumentando su contenido utilizando Flex Layout.

Actividad

De acuerdo con lo que se practicó en la actividad anterior y lo que se aprendió sobre Flex Layout, apliquemos Flex Layout en el Submenú de Major Appliance.

1. En el archivo menu.jsonc, remueva el bloque de código en que son definidos vtex.menu@2.x:submenu#major y suyos hijos. Este bloque será declarado en un nuevo archivo pronto:

   "vtex.menu@2.x:submenu#major": {
         "children":[ "vtex.menu@2.x:menu#major" ]
     },
   "vtex.menu@2.x:menu#major": {
       "children": [
           "menu-item#refrigerators",
           "menu-item#ovens",
           "menu-item#washers"
       ],
       "props": {
           "orientation": "vertical"
       }
   },

2. Crea el archivo menu-flex.jsonc, el bloque de código arriba necesita estar en esto archivo; flex-layout.row#major estará en la lista de children del bloque vtex.menu@2.x:submenu#major y defina como:

   
   {
     ...
     "flex-layout.row#major": {
       "children": [
         "flex-layout.col#menu",
         "flex-layout.col#img"
       ]
     },
     ...
   }
   ``

3. Ahora tenemos que declarar los bloques definidos en flex-layout.row#major. Para comenzar, declare el bloque flex-layout.col#menu con vtex.menu@2.x:menu#major como children.

4. Haga lo mismo para el bloque flex-layout.col#img, declarándolo con image#menu y rich-text#header como children y las siguientes props:

   ...
   "props":{
     "paddingRight": 4,
     "horizontalAlign": "right"
   }
   ...

5. Por último, declaremos el image#menu pasado como children en el último paso. Para esto, use el siguiente código:

   ...
   "image#menu": {
     "props": {
       "src": "https://appliancetheme.vteximg.com.br/arquivos/menu-washer.jpg",
       "link": {
         "url": "/small-appliances/coffee-makers"
       },
       "alt": "Coffee Makers Collection",
       "maxWidth": "200px"
     }
   }

   :information_source: Recuerde acceder a la documentación del Flex Layout y del Menú 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í.