Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:
:white_check_mark: Code compilation
:white_check_mark: Use search-result-layout
on the store.search
:white_check_mark: Define search-result-layout
:white_check_mark: Use search-result-layout.desktop
on the search-result-layout
:white_check_mark: Define search-result-layout.desktop
:white_check_mark: Define search components
:x: You did't use pagination
and preventRouteChange
on search-result-layout.desktop
's props
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Code compilation
:white_check_mark: Use search-result-layout
on the store.search
:white_check_mark: Define search-result-layout
:white_check_mark: Use search-result-layout.desktop
on the search-result-layout
:white_check_mark: Define search-result-layout.desktop
:white_check_mark: Define search components
:white_check_mark: Use the correct layout props
Página de busca
:sparkles: Branch: search
Introdução
Terminamos de implementar nossa página de produto e seguiremos para a página de busca. Ambas são muito similares no aspecto de terem blocos que são únicos desse contexto. Exploraremos esse bloco de forma desordenada nesse step, somente para entender seus comportamentos e seguiremos para melhorar o layout no próximo passo.
Search Layout
A
store.search
, como os outros templates, também pode ser flexível. Para construir um layout único, é preciso usar um bloco chamadosearch-result-layout
.O
search-result-layout
, por sua vez, deve receber três outros blocos:search-result-layout.desktop
search-result-layout.mobile
search-not-found-layout
Como você já deve ter percebido, os dois primeiros definem qual layout será exibido no desktop e no mobile, respectivamente, e o terceiro define o layout da página de resultados não encontrados.
No curso, focaremos na implementação do layout de desktop
Blocos de search
A documentação de Search Result oferece uma boa referência dos blocos que podem ser usados no contexto de busca. Nesse step focaremos em tentar exibir os principais:
breadcrumb.search
);search-title.v2
);total-products.v2
);order-by.v2
);search-fetch-more
);search-fetch-previous
);filter-navigator.v3
);search-content
)Apesar de serem muitos, todos esses blocos são relativamente simples e funcionam muito bem sem muita necessidade de configurar suas
props
.Atividade
Copie o código acima no arquivo
search.jsonc
e defina umasearch-result-layout.desktop
que tenha:pagination
aqui);E tenha como filhos, nesta ordem:
breadcrumb.search
;search-title.v2
;total-products.v2
;order-by.v2
;search-fetch-previous
;search-content
;filter-navigator.v3
;search-fetch-more
.:information_source: Lembre-se de acessar a documentação de Search Result caso tenha alguma dúvida durante a atividade.
Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.