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

:white_check_mark::white_check_mark::x::x::x::x::x::x::x::x::x::x::x:

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation: menu.jsonc :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:

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

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation: menu.jsonc :white_check_mark: Code compilation: menu-flex.jsonc :x: You must declare flex-layout.row#major as children of vtex.menu@2.x:submenu#major :white_check_mark: flex-layout row must be correctly stated :white_check_mark: flex-layout row must contain two cols as children :white_check_mark: flex-layout columns must be correctly stated :white_check_mark: flex-layout colum must contain major appliances menu as children :white_check_mark: flex-layout colum must contain image and rich-text as children :white_check_mark: flex-layout colum must contain correct props :white_check_mark: flex-layout colum must contain correct props :white_check_mark: image component must be correctly stated :white_check_mark: image component must contain correct props

Try again :grin:

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

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

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

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

You have successfully completed this step!

marianneto / store-framework