Advanced menu with Flex Layout

[github-learning-lab]

Menu avançado com Flex Layout

✨ Branch: menuflex

Introdução

Como vimos no último passo, um Submenu aceita como children qualquer bloco do Store Framework.

A partir desse entendimento, podemos melhorar a configuração do Menu feita na atividade anterior, incrementando seu conteúdo com o uso do Flex Layout.

Atividade

De acordo com o que foi praticado na atividade anterior e o que foi aprendido sobre Flex Layout, vamos aplicar o Flex Layout no Submenu de Major Appliance.

1. No arquivo menu.jsonc, remova o block de código em que são definidos [email protected]:submenu#major e seus filhos:

   "[email protected]:submenu#major": { 
         "children":[ "[email protected]:menu#major" ]
     },
     "[email protected]:menu#major": { 
         "children": [ 
             "menu-item#refrigerators", 
             "menu-item#ovens", 
             "menu-item#washers" 
         ], 
         "props": { 
             "orientation": "vertical" 
         }
     },

2. Crie o arquivo menu-flex.jsonc file; flex-layout.row#major estará na lista de children do bloco [email protected]:submenu#major e será definido como:

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

3. Agora temos que declarar os blocos definidos em flex-layout.row#major. Para começar, declare o bloco flex-layout.col#menu com [email protected]:menu#major como children;

4. Faça o mesmo para o bloco flex-layout.col#img, o declarando com image#menu e rich-text#header como children e as seguintes props:

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

5. Por último, vamos declarar o image#menu passado como children no último passo. Para isso, use o código abaixo:

   ...
   "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"
     }
   }

ℹ️ Lembre-se de acessar a documentação do Flex Layout e do Menu caso tenha alguma dúvida durante a atividade.

Resultado esperado:

---

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

---

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

[vtex-course-hub]

Oopsie, something went wrong 😿

Results

❌✅❌❌❌❌❌❌❌❌❌❌❌

Tests

❌ Request failed with status code 404
✅ Code compilation: menu.jsonc
❌ There's something wrong with the format of your menu-flex.jsonc file
❌ You must declare flex-layout.row#major as children of [email protected]:submenu#major
❌ You must declare flex-layout.row#major on menu-flex.jsonc
❌ flex-layout.row#major must have flex-layout.col#menu, flex-layout.col#img as children
❌ You must declare flex-layout.col#menu, flex-layout.col#img on menu-flex.jsonc
❌ flex-layout.col#menu must have no props and [email protected]:menu#major as children
❌ flex-layout.col#img must have image#menu and rich-text#header as children
❌ flex-layout.col#img must have paddingRight, horizontalAlign as children
❌ flex-layout.col#img must have paddingRight, horizontalAlign as children
❌ You must declare image#menu on menu-flex.jsonc
❌ You must declare src, link, alt, maxWidth on image#menu. Check their names and values.

Try again 😁

[vtex-course-hub]

Oopsie, something went wrong 😿

Results

❌✅❌❌❌❌❌❌❌❌❌❌❌

Tests

❌ Request failed with status code 404
✅ Code compilation: menu.jsonc
❌ There's something wrong with the format of your menu-flex.jsonc file
❌ You must declare flex-layout.row#major as children of [email protected]:submenu#major
❌ You must declare flex-layout.row#major on menu-flex.jsonc
❌ flex-layout.row#major must have flex-layout.col#menu, flex-layout.col#img as children
❌ You must declare flex-layout.col#menu, flex-layout.col#img on menu-flex.jsonc
❌ flex-layout.col#menu must have no props and [email protected]:menu#major as children
❌ flex-layout.col#img must have image#menu and rich-text#header as children
❌ flex-layout.col#img must have paddingRight, horizontalAlign as children
❌ flex-layout.col#img must have paddingRight, horizontalAlign as children
❌ You must declare image#menu on menu-flex.jsonc
❌ You must declare src, link, alt, maxWidth on image#menu. Check their names and values.

Try again 😁

[vtex-course-hub]

You did great! 😁

Results

✅✅✅✅✅✅✅✅✅✅✅✅✅

Tests

✅ Getting the file
✅ Code compilation: menu.jsonc
✅ Code compilation: menu-flex.jsonc
✅ Major appliances submenu must contain a flex-layout row as children
✅ flex-layout row must be correctly stated
✅ flex-layout row must contain two cols as children
✅ flex-layout columns must be correctly stated
✅ flex-layout colum must contain major appliances menu as children
✅ flex-layout colum must contain image and rich-text as children
✅ flex-layout colum must contain correct props
✅ flex-layout colum must contain correct props
✅ image component must be correctly stated
✅ image component must contain correct props

[github-learning-lab]

Você terminou este passo com sucesso!

Vá para o próximo passo