Making your content responsive

[github-learning-lab]

Tornando seu conteúdo responsivo

✨ Branch: responsive

Introdução

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 visto nos passos anteriores e o Rich Text.

Como vimos no terceiro passo, o Rich Text é responsável por transformar textos em elementos HTML, com a grande vantagem de ler em Markdown. Isso dá ao componente a flexibilidade de aceitar diferentes estruturas de texto, permitindo ao lojista construir sua comunicação de forma mais clara e direta.

Configurando o Rich Text

Assim como a sua funcionalidade, a configuração do Rich Text também é simples.

Da mesma forma que o "Hello, world!" foi feito, podemos montar um exemplo de implementação do bloco usando texto escrito em markdown. Por exemplo:

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

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 delcarar os blocos dentro do template store.home:

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

Em seguida devemos declarar esses blocos da seguinte forma:

...

"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"
  }
}

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.

Atividade

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;

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:

   "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"
     }
   },

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

ℹ️ Lembre-se de acessar a documentação do Responsive Layout caso tenha alguma dúvida durante a atividade.

---

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

---

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

[vtex-course-hub]

Oopsie, something went wrong 😿

Results

✅✅❌❌❌❌❌❌❌

Tests

✅ Getting the file
✅ First test - Code compilation
❌ You havent declared responsive-layout.desktop#desktop,responsive-layout.mobile#mobile on you store.home
❌ You haven't stated rich-text#desktop and image#desktop correctly inside responsive-layout.desktop#desktop. Review their names, positioning and parent block.
❌ You haven't stated rich-text#mobile and image#mobile correctly inside responsive-layout.mobile#mobile. Review their names, positioning and parent block.
❌ You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values.
❌ You haven't declared the props text,textPosition,textAlignment from rich-text#desktop correctly. Review their names and values.
❌ You haven't declared the props alt,link,maxWidth,src from image#mobile correctly. Review their names and values.
❌ You haven't declared the props src,link,alt,maxWidth from image#desktop correctly. Review their names and values.

Try again 😁

[vtex-course-hub]

You did great! 😁

Results

✅✅✅✅✅✅✅✅✅

Tests

✅ Getting the file
✅ First test - Code compilation
✅ store.home must contain responsive layouts mobile and desktop
✅ Desktop's image and rich text must be correctly stated
✅ Mobile's image and rich text must be correctly stated
✅ Rich-text Mobile props must be correclty declared
✅ Rich-text Desktop props must be correclty declared
✅ Image Mobile props must be correclty declared
✅ Image Desktop props must be correclty declared

[github-learning-lab]

Você terminou este passo com sucesso!

Vá para o próximo passo