Open github-learning-lab[bot] opened 4 years ago
: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: 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
: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: 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
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 definevtex.menu@2.x:submenu#major
and also its children. This code block will be declared in a new file soon: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 thevtex.menu@2.x:submenu#major
block and it's defined as:Now, let's declare the blocks defined in
flex-layout.row#major
. To start, declare theflex-layout.col#menu
block, havingvtex.menu@2.x:menu#major
as child;Do the same for the
flex-layout.col#img
block, declaringimage#menu
andrich-text#header
as its children, in addition to the following props:Lastly, let's declare the former
image#menu
as child in this last step, using the code below::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.