Footer

[github-learning-lab[bot]]

Footer

:sparkles: Branch: footer

Introduction

In this step, we will learn how to create a component that is commonly seen as unimportant, but which is critical to providing a good user experience: the footer.

Few users scroll until the footer. However, the ones that do make it that far may be looking for information that is usually housed in this block, such as links to social media and payment methods accepted by the store. It can also house customized pages that direct to the company's recruitment site, customer support and category menus.

FOTO Footer

Configuring the Footer

The Footer block, just as the Header, is responsive, meaning that it can be configured to adapt to different devices, such as desktop and mobile.

Below, we can see an Footer implementation example for desktop:

{
  "footer": {
    "blocks": ["footer-layout.desktop"]
  },
  "footer-layout.desktop": {
    "children": [
      "flex-layout.row#footer-1-desktop"
    ]
  }
}

Activity

We are now going to configure a footer for the store's main page, considering the above-mentioned example code for desktop and mobile.

We will not implement the menu during this activity, since it's already be dealt with during the Header context. We will instead look at accepted payment methods and the store's social media networks.

1. In the footer.jsonc file, copy the code above and to use in your theme;

2. Thereafter, declare the following block:

     "flex-layout.row#footer-1-desktop": {
       "children": [
         "flex-layout.col#footer-left-desktop",
         "flex-layout.col#footer-right-desktop"
       ],
       "props": {
         "blockClass": "footer-row",
         "paddingTop": 7,
         "paddingBottom": 7
       }
     }

3. Based on the block above, build the flex-layout.col#footer-left-desktop, having the following children: accepted-payment-methods;

4. Then, build the accepted-payment-methods block with the following payment methods: MasterCard, Visa and Diners Club. And just to gain a bit more knowledge, find out how to display payment methods in color in this documentation;

5. In this step, we will use the social-networks block to display our store's social media networks. Check the documentation for more on this, and then implement as the social media networks as children of the flex-layout.col#footer-right-desktop block. We want to display Facebook, Instagram and Twitter.

6. Lastly, make the social media network logos appear in color. Read the footer's documentation for more on this.

:information_source: Remember to access the footer's documentation in case 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]]

Oopsie, something went wrong :crying_cat_face:

Results

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

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 :x: Couldn't find the required props in social-networks

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

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

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 :x: Couldn't find the required props in social-networks

Try again :grin:

[vtex-course-hub[bot]]

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