Closed github-learning-lab[bot] closed 4 years ago
:white_check_mark::white_check_mark::x::x::x::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :x: You haven't stated rich-text#desktop and image#desktop correctly inside responsive-layout.desktop#desktop. Review their names, positioning and parent block. :x: You haven't stated rich-text#mobile and image#mobile correctly inside responsive-layout.mobile#mobile. Review their names, positioning and parent block. :x: You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values. :white_check_mark: Rich-text Desktop props must be correclty declared :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared
:x::x::x::x::x::x::x::x:
:x: There's something wrong with the format of your home.jsonc
file
:x: You havent declared responsive-layout.desktop#desktop,responsive-layout.mobile#mobile on you store.home
:x: You haven't stated rich-text#desktop and image#desktop correctly inside responsive-layout.desktop#desktop. Review their names, positioning and parent block.
:x: You haven't stated rich-text#mobile and image#mobile correctly inside responsive-layout.mobile#mobile. Review their names, positioning and parent block.
:x: You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values.
:x: You haven't declared the props text,textPosition,textAlignment from rich-text#desktop correctly. Review their names and values.
:x: You haven't declared the props alt,link,maxWidth,src from image#mobile correctly. Review their names and values.
:x: You haven't declared the props src,link,alt,maxWidth from image#desktop correctly. Review their names and values.
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :x: You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values. :white_check_mark: Rich-text Desktop props must be correclty declared :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :white_check_mark: Rich-text Mobile props must be correclty declared :white_check_mark: Rich-text Desktop props must be correclty declared :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :white_check_mark: Rich-text Mobile props must be correclty declared :white_check_mark: Rich-text Desktop props must be correclty declared :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared
Tornando seu conteúdo responsivo
:sparkles: Branch: responsiveimage
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:
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:
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
eresponsive-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:
home.jsonc
e declare os blocos deresponsive-layout
no templatestore.home
;rich-text#mobile
, altere o markdown da primeira frase parah3
e da segunda parah4
;image#desktop
como children deresponsive-layout.desktop#desktop
. Faça o mesmo comimage#mobile
emresponsive-layout.mobile#mobile
;100%
.:information_source: Lembre-se de acessar a documentação do Responsive Layout caso tenha alguma dúvida durante a atividade.
:no_entry_sign: Perdido?
Há algum problema com esse passo? Que tal nos enviar um feedback? :pray:
Criar feedback
Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.