Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark::white_check_mark::white_check_mark::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: Your store must contain header full and header layouts desktop and mobile :white_check_mark: Desktop's header rows must be correctly stated :x: You haven't stated header-row#notification, header-row#main-mobile, header-row#search correctly inside header-layout.mobile. Review their names, positioning and parent block. :white_check_mark: Your store must contain Desktop's Header Rows :white_check_mark: Your store must contain Mobile's Header Rows :white_check_mark: Your store must contain login, logo and rich-text :white_check_mark: Your store must contain correct login props :white_check_mark: Your store must contain correct logo props :white_check_mark: Your store must contain correct rich-text props :white_check_mark: Your store must contain the correct Search row on mobile mode :white_check_mark: Your store must contain the correct main row on mobile mode :x: You haven't declared the row header-row#main props and children properly :white_check_mark: Your store must contain the correct main row on desktop mode :white_check_mark: Search SVG should be correctly placed on iconpack :white_check_mark: Cart SVG should be correctly placed on iconpack
:white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark::white_check_mark::white_check_mark::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: Your store must contain header full and header layouts desktop and mobile :white_check_mark: Desktop's header rows must be correctly stated :x: You haven't stated header-row#notification, header-row#main-mobile, header-row#search correctly inside header-layout.mobile. Review their names, positioning and parent block. :white_check_mark: Your store must contain Desktop's Header Rows :white_check_mark: Your store must contain Mobile's Header Rows :white_check_mark: Your store must contain login, logo and rich-text :white_check_mark: Your store must contain correct login props :white_check_mark: Your store must contain correct logo props :white_check_mark: Your store must contain correct rich-text props :white_check_mark: Your store must contain the correct Search row on mobile mode :white_check_mark: Your store must contain the correct main row on mobile mode :x: You haven't declared the row header-row#main props and children properly :white_check_mark: Your store must contain the correct main row on desktop mode :white_check_mark: Search SVG should be correctly placed on iconpack :white_check_mark: Cart SVG should be correctly placed on iconpack
: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::white_check_mark::white_check_mark::x::x::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: First test - Code compilation :white_check_mark: Your store must contain header full and header layouts desktop and mobile :white_check_mark: Desktop's header rows must be correctly stated :white_check_mark: Mobile's header rows must be correctly stated :white_check_mark: Your store must contain Desktop's Header Rows :white_check_mark: Your store must contain Mobile's Header Rows :white_check_mark: Your store must contain login, logo and rich-text :white_check_mark: Your store must contain correct login props :white_check_mark: Your store must contain correct logo props :white_check_mark: Your store must contain correct rich-text props :white_check_mark: Your store must contain the correct Search row on mobile mode :x: You haven't declared the row header-row#main-mobile props and children properly :x: You haven't declared the row header-row#main props and children properly :white_check_mark: Your store must contain the correct main row on desktop mode :white_check_mark: Search SVG should be correctly placed on iconpack :white_check_mark: Cart SVG should be correctly placed on iconpack
: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::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: Your store must contain header full and header layouts desktop and mobile :white_check_mark: Desktop's header rows must be correctly stated :white_check_mark: Mobile's header rows must be correctly stated :white_check_mark: Your store must contain Desktop's Header Rows :white_check_mark: Your store must contain Mobile's Header Rows :white_check_mark: Your store must contain login, logo and rich-text :white_check_mark: Your store must contain correct login props :white_check_mark: Your store must contain correct logo props :white_check_mark: Your store must contain correct rich-text props :white_check_mark: Your store must contain the correct Search row on mobile mode :white_check_mark: Your store must contain the correct main row on mobile mode :x: You haven't declared the row header-row#main props and children properly :white_check_mark: Your store must contain the correct main row on desktop mode :white_check_mark: Search SVG should be correctly placed on iconpack :white_check_mark: Cart SVG should be correctly placed on iconpack
: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::white_check_mark::white_check_mark::x::x::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: First test - Code compilation :white_check_mark: Your store must contain header full and header layouts desktop and mobile :white_check_mark: Desktop's header rows must be correctly stated :white_check_mark: Mobile's header rows must be correctly stated :white_check_mark: Your store must contain Desktop's Header Rows :white_check_mark: Your store must contain Mobile's Header Rows :white_check_mark: Your store must contain login, logo and rich-text :white_check_mark: Your store must contain correct login props :white_check_mark: Your store must contain correct logo props :white_check_mark: Your store must contain correct rich-text props :white_check_mark: Your store must contain the correct Search row on mobile mode :x: You haven't declared the row header-row#main-mobile props and children properly :x: You haven't declared the row header-row#main props and children properly :white_check_mark: Your store must contain the correct main row on desktop mode :white_check_mark: Search SVG should be correctly placed on iconpack :white_check_mark: Cart SVG should be correctly placed on iconpack
: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::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: First test - Code compilation :white_check_mark: Your store must contain header full and header layouts desktop and mobile :white_check_mark: Desktop's header rows must be correctly stated :white_check_mark: Mobile's header rows must be correctly stated :white_check_mark: Your store must contain Desktop's Header Rows :white_check_mark: Your store must contain Mobile's Header Rows :white_check_mark: Your store must contain login, logo and rich-text :white_check_mark: Your store must contain correct login props :white_check_mark: Your store must contain correct logo props :white_check_mark: Your store must contain correct rich-text props :white_check_mark: Your store must contain the correct Search row on mobile mode :x: You haven't declared the row header-row#main-mobile props and children properly :white_check_mark: Your store must contain the correct main row on desktop mode :white_check_mark: Your store must contain the correct main row on desktop mode :white_check_mark: Search SVG should be correctly placed on iconpack :white_check_mark: Cart SVG should be correctly placed on iconpack
: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::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: Your store must contain header full and header layouts desktop and mobile :white_check_mark: Desktop's header rows must be correctly stated :white_check_mark: Mobile's header rows must be correctly stated :white_check_mark: Your store must contain Desktop's Header Rows :white_check_mark: Your store must contain Mobile's Header Rows :white_check_mark: Your store must contain login, logo and rich-text :white_check_mark: Your store must contain correct login props :white_check_mark: Your store must contain correct logo props :white_check_mark: Your store must contain correct rich-text props :white_check_mark: Your store must contain the correct Search row on mobile mode :white_check_mark: Your store must contain the correct main row on mobile mode :white_check_mark: Your store must contain the correct main row on desktop mode :white_check_mark: Your store must contain the correct main row on desktop mode :white_check_mark: Search SVG should be correctly placed on iconpack :white_check_mark: Cart SVG should be correctly placed on iconpack
Cabeçalho da loja
:sparkles: Branch: header
Introdução
Neste passo, aprenderemos a configurar o primeiro componente de toda loja: o Header.
O Header tem um papel muito importante na página inicial da loja, pois ele é o responsável por abrigar outros blocos essenciais para a navegação do usuário, como a barra de busca e o menu.
Header Desktop:![image](https://user-images.githubusercontent.com/12139385/70191371-420ab880-16d7-11ea-9d28-fa2f184870ce.png)
Header Mobile:![image](https://user-images.githubusercontent.com/12139385/70191413-6797c200-16d7-11ea-9401-754942f5d9a9.png)
Configurando o Header
O bloco do Header é responsivo, ou seja, ele pode ser configurado para se adaptar a diferentes dispositivos, como desktop e mobile.
Abaixo, podemos conferir um exemplo de implementação:
Atividade
Agora, vamos configurar do zero um Header para a página inicial da sua loja, com barra de notificação e busca, logo, carrinho e login. O Menu não será configurado nesse momento, pois trabalharemos com ele mais a fundo na próxima atividade.
Para a implementação do Header com todos esses blocos, levaremos em consideração o código exemplo apresentado acima. Assim, será possível construir um Header responsivo, adaptável para usuários de desktop e mobile.
header
no arquivoheader.jsonc
, que deve ser criado na pastastore/blocks
.header-row#main
com as seguintes children:logo
,header-spacer
,search-bar
,minicart
elogin
;header-row#main
, declare as propsinverted
,sticky
efullWidth
com os valorestrue
,true
efalse
, respectivamente;"header-row#notification"
): o Rich Text;Ao concluir o passo 8, os novos ícones de barra de busca e carrinho devem estar renderizados na sua loja da seguinte forma:
:information_source: Lembre-se de acessar a documentação do Header 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.