Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Advanced menu with Flex Layout #24

Open
github-learning-lab bot opened this issue Oct 20, 2020 · 2 comments
Open

Advanced menu with Flex Layout #24

github-learning-lab bot opened this issue Oct 20, 2020 · 2 comments

Comments

@github-learning-lab
Copy link

Advanced menu with Flex Layout

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.

  1. In the menu.jsonc file, remove the block of code in which you define [email protected]:submenu#major and also its children. This code block will be declared in a new file soon:

    "[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. 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 [email protected]:submenu#major block and it's defined as:

    {
      ...
      "flex-layout.row#major": {
        "children": [
          "flex-layout.col#menu",
          "flex-layout.col#img"
        ]
      },
      ...
    }
  3. Now, let's declare the blocks defined in flex-layout.row#major. To start, declare the flex-layout.col#menu block, having [email protected]:menu#major as child;

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

ℹ️ Remember to access the documentation of both Flex Layout and Menu if you have any questions during the activity.

Expected result:


🚫 Are you lost?

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

Submit feedback


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

@vtex-course-hub
Copy link

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
Copy link
Author

You have successfully completed this step!

Go to the next step!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

0 participants