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

Making your content responsive

:sparkles: Branch: responsive

Introduction

An e-commerce's homepage is always the client's first contact with the brand. Therefore, it's common for retailers to want to establish direct communication with their users at this strategic point in time during navigation.

Several components in Store Framework serve this scenario, such as the Info Card, which we looked at previously, and the Rich Text.

As we have seen during step three, the Rich Text is responsible for transforming texts into HTML elements, having the big advantage of reading Markdown. This give the component the flexibility to accept various text structures, allowing retailers to build their communication in more direct and clear way.

Configuring the Rich Text

Just as with its functionality, the Rich Text configuration is also simple.

The same way that "Hello, world!" was created, we can create a block implementation example using written text in markdown format. For example:

"rich-text": {
  "props": {
    "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection",
    "textPosition": "CENTER",
    "textAlignment": "CENTER"
  }
},

As previously stated, using Markdown allows for more component flexibility. However, it may also lead to your alteration in your rendering, according to the device used by the user.

For example: the above sentence ( # Your Coffee, Your Way \n ### New Coffee Makers Collection ) can be use a markdown that's suitable for desktop, but not necessarily for mobile as well (whose screen size is smaller).

To resolve this scenario and make the behavior more adaptable to other devices, we should use the Responsive Layout.

First, we must declare the blocks in the store.home template:

"responsive-layout.desktop#desktop", "responsive-layout.mobile#mobile"

Then, we must declare these blocks as follows:


...

"responsive-layout.desktop#desktop": {
  "children": ["rich-text#desktop"]
},

"responsive-layout.mobile#mobile": {
  "children": ["rich-text#mobile"]
},

"rich-text#desktop": {
  "props": {
    "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection",
    "textPosition": "CENTER",
    "textAlignment": "CENTER"
  }
},

"rich-text#mobile": {
  "props": {
    "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection",
    "textPosition": "CENTER",
    "textAlignment": "CENTER"
  }
}

As we interpret the code above, we can notice two Rich Text configurations, built based on responsive-layout.desktop#desktop and responsive-layout.mobile#mobile.

Activity

During this activity, we will play around a little with the Rich Text markdown and learn how to use it with the Image component. All the while using Responsive Layout, of course!

Desktop:

Mobile:

Add the code given above to home.jsonc and declare the responsive-layout block in the store.home template;
In rich-text#mobile, alter the markdown of the first sentence to h3 and of the second to h4;

If you do not remember how is the Markdown syntax, you can check it in the Markdown Documentation.
Add image#desktop as a child of responsive-layout.desktop#desktop. Repeat the process with image#mobile and responsive-layout.mobile#mobile;

Declare the following Image blocks:

"image#desktop": {
  "props": {
    "src": "https://appliancetheme.vteximg.com.br/arquivos/Responsive-Image-Desktop.jpg?q=1",
    "link": {
      "url": "/small-appliances/coffee-makers"
    } ,
    "alt": "Coffee Makers Collection"
  }
},

"image#mobile": {
  "props": {
    "src": "https://appliancetheme.vteximg.com.br/arquivos/Responsive-Image-Mobile.jpg?q=1",
    "link": {
      "url": "/small-appliances/coffee-makers"
    } ,
    "alt": "Coffee Makers Collection"
  }
},

When analyzing the Image component props, set the two images' max width to 100%.

:information_source: Remember to access the Responsive Layout documentation if you have any question during your activity.

: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.

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

You have successfully completed this step!

Go to the next step!

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

You have successfully completed this step!

Go to the next step!

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

You have successfully completed this step!

Go to the next step!

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:

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Make the correct color changes :white_check_mark: Change the heading 1 size to 2.5rem

pavanetti / store-framework