github-learning-lab[bot] commented 4 years ago

Advanced menu with Flex Layout

:sparkles: Branch: menuflex

Introduction

As we've seen in the last step, a Submenu accepts any Store Framework block as child.

With this in mind, we can improve the previous activity's Menu configuration, adding to its content by using Flex Layout.

Activity

According to what we did in the last activity and what was learned about Flex Layout, let's apply Flex Layout to the Major Appliances submenu.

In the menu.jsonc file, remove the block of code in which you define vtex.menu@2.x:submenu#major and also its children:

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

Create the menu-flex.jsonc file; flex-layout.row#major will be in the children list pertaining to the vtex.menu@2.x:submenu#major block and it's defined as:
```
{
  ...
  "flex-layout.row#major": {
    "children": [
      "flex-layout.col#menu",
      "flex-layout.col#img"
    ]
  },
  ...
}
```
Now, let's declare the blocks defined in flex-layout.row#major. To start, declare the flex-layout.col#menu block, having vtex.menu@2.x:menu#major as child;
Do the same for the flex-layout.col#img block, declaring image#menu and rich-text#header as its children, in addition to the following props:
```
...
"props":{
  "paddingRight": 4,
  "horizontalAlign": "right"
}
...
```

Lastly, let's declare the former image#menu as child in this last step, using the code below:

...
"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: Remember to access the documentation of both Flex Layout and Menu if you have any questions during the activity.

Expected result:

If you're still unsure as to how to send your answers, click here.

vtex-course-hub[bot] commented 4 years ago

Oopsie, something went wrong :crying_cat_face:

Results

:x::x::x::x::x::x::x::x::x::x::x::x::x:

Tests

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

Try again :grin:

github-learning-lab[bot] commented 4 years ago

You have successfully completed this step!

NeivaBernardo / store-framework