A página inicial de um e-commerce é sempre o primeiro contato do cliente com a marca. Por isso, é comum que o lojista queira estabelecer uma comunicação direta com os seus usuários nesse momento estratégico da navegação.

No Store Framework, existem alguns componentes que atendem a esse cenário, como o Info Card e o Rich Text.

Assim como a sua funcionalidade, a configuração do Rich Text também é simples, podemos montar um exemplo de implementação do bloco usando texto escrito em markdown. Por exemplo:

Como falado anteriormente, o uso de Markdown permite flexibilidade ao componente. Mas, por outro lado, também pode fazer com que a sua renderização sofra alterações de acordo com o dispositivo usado pelo usuário.

Por exemplo: a frase acima ( # Your Coffee, Your Way \n ### New Coffee Makers Collection ) pode usar um markdown adequado para desktop, mas não necessariamente para mobile (cujo tamanho de tela é menor).

Para resolver esse cenário e tornar o componente mais adaptável a outros dispositivos, devemos usar o Responsive Layout.

Primeiramente devemos declarar os blocos dentro do template store.home:

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

Em seguida devemos declarar esses blocos da seguinte forma:

Ao interpretar o código acima, perceba como duas configurações de Rich Text são construídas a partir do uso de responsive-layout.desktop#desktop e responsive-layout.mobile#mobile.

Nessa atividade, vamos brincar um pouco com o markdown do Rich Text e aprender a usá-lo com o componente Image. Tudo isso usando o Responsive Layout, é claro!

Desktop:

Mobile:

1. Adicione o código proposto acima no arquivo home.jsonc e declare os blocos de responsive-layout no template store.home;

2. No rich-text#mobile, altere o markdown da primeira frase para h3 e da segunda para h4;

   Se você não se lembra da sintaxe de Markdown, é possível consultá-la em Markdown Documentation.

3. Adicione image#desktop como children de responsive-layout.desktop#desktop. Faça o mesmo com image#mobile em responsive-layout.mobile#mobile;

4. Declare os seguintes blocos de Image:

   
   

   _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

   },

   
   

5. Analisando as props do componente Image, defina a largura máxima das duas imagens como 100%.