Making your content responsive

This content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.

Introduction

The homepage of e-commerce is always the customer's first contact with the brand. For this reason, it is common for the shopkeeper to want to establish direct communication with his users at this strategic moment of navigation.

In the Store Framework, there are some components that address this scenario, such as Info Card and Rich Text.

Configuring Rich Text

As well as its functionality, the configuration of Rich Text is also simple, we can put together an example of implementing the block using text written in markdown. For example:


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

As mentioned earlier, the use of Markdown allows flexibility to the component. But, on the other hand, it can also cause your rendering to change according to the device used by the user.

For example, the phrase above (#Your Coffee, Your Way\n###New Coffee Makers Collection) can use a markdown suitable for desktop, but not necessarily for mobile (whose screen size is smaller).

To solve this scenario and make the component more adaptable to other devices, we must use the Responsive Layout.

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

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

Then we must declare these blocks as follows:


_26
_26...
_26
_26"responsive-layout.desktop#desktop": {
_26  "children": ["rich-text#desktop"]
_26},
_26
_26"responsive-layout.mobile#mobile": {
_26  "children": ["rich-text#mobile"]
_26},
_26
_26"rich-text#desktop": {
_26  "props": {
_26    "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection (I'm on desktop)",
_26    "textPosition": "CENTER",
_26    "textAlignment": "CENTER"
_26  }
_26},
_26
_26"rich-text#mobile": {
_26  "props": {
_26    "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection (I'm on mobile)",
_26    "textPosition": "CENTER",
_26    "textAlignment": "CENTER"
_26  }
_26}

When interpreting the code above, notice how two Rich Text configurations are built using responsive-layout.desktop#desktop andresponsive-layout.mobile#mobile.

Activity

In this activity, let's play around with the Rich Text markdown and learn how to use it with the Image component. All of this using Responsive Layout, of course!

Desktop:

{"base64":" ","img":{"width":2104,"height":1128,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":848033,"url":"https://user-images.githubusercontent.com/12139385/70152049-414c3500-168b-11ea-8da3-4f4ce0f5fee6.png"}}

Mobile:

{"base64":" ","img":{"width":524,"height":968,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":273130,"url":"https://user-images.githubusercontent.com/12139385/70152883-bf5d0b80-168c-11ea-81e0-25be5ed3d5ce.png"}}

Add the code proposed above in the home.jsonc file and declare theresponsive-layout blocks in the store.home template;
In rich-text#mobile, change the markdown of the first sentence to h3 and the second to h4;

If you don't remember the Markdown syntax, you can consult it at Markdown Documentation.
Add image#desktop as children of responsive-layout.desktop#desktop. Do the same with image#mobile in responsive-layout.mobile#mobile;
Declare the following Image blocks:

_19"image#desktop": { _19 "props": { _19 "src": "https://appliancetheme.vteximg.com.br/arquivos/Responsive-Image-Desktop.jpg?q=1", _19 "link": { _19 "url": "/small-appliances/coffee-makers" _19 } , _19 "alt": "Coffee Makers Collection" _19 } _19}, _19 _19"image#mobile": { _19 "props": { _19 "src": "https://appliancetheme.vteximg.com.br/arquivos/Responsive-Image-Mobile.jpg?q=1", _19 "link": { _19 "url": "/small-appliances/coffee-makers" _19 } , _19 "alt": "Coffee Makers Collection" _19 } _19},
Analyzing the Image component props, set the maximum width of the two images to 100%.

Note: Remember to access the Responsive Layout documentation if you have any questions during the activity.

Answer sheet

See answer sheet for home.jsonc

home.jsonc


_53{
_53  "store.home": {
_53    "blocks": [
_53      "responsive-layout.desktop#desktop",
_53      "responsive-layout.mobile#mobile"
_53    ]
_53  },
_53  "responsive-layout.desktop#desktop": {
_53    "children": ["rich-text#desktop", "image#desktop"]
_53  },
_53
_53  "responsive-layout.mobile#mobile": {
_53    "children": ["rich-text#mobile", "image#mobile"]
_53  },
_53  "image#desktop": {
_53    "props": {
_53      "src": "https://appliancetheme.vteximg.com.br/arquivos/Responsive-Image-Desktop.jpg?q=1",
_53      "maxWidth": "100%",
_53      "link": {
_53        "url": "/small-appliances/coffee-makers"
_53      },
_53      "alt": "Coffee Makers Collection"
_53    }
_53  },
_53
_53  "image#mobile": {
_53    "props": {
_53      "src": "https://appliancetheme.vteximg.com.br/arquivos/Responsive-Image-Mobile.jpg?q=1",
_53      "maxWidth": "100%",
_53      "link": {
_53        "url": "/small-appliances/coffee-makers"
_53      },
_53      "alt": "Coffee Makers Collection"
_53    }
_53  },
_53
_53  "rich-text#desktop": {
_53    "props": {
_53      "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection",
_53      "textPosition": "CENTER",
_53      "textAlignment": "CENTER"
_53    }
_53  },
_53
_53  "rich-text#mobile": {
_53    "props": {
_53      "text": "### Your Coffee, Your Way \n #### New Coffee Makers Collection",
_53      "textPosition": "CENTER",
_53      "textAlignment": "CENTER"
_53    }
_53  }
_53  //...,
_53}