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. This code block will be declared in a new file soon:

"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, the code block that is declared above needs to be in this 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:

:no_entry_sign: Are you lost?

Is there any problem with this step? What about sending us a feedback? :pray:

Submit feedback

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

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:

Tests

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

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:

Tests

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

denizLapantov / store-framework