github-learning-lab[bot] commented 3 years ago

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 chamado search-result-layout.

{
  "store.search": {
     "blocks": ["search-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.

{
  "store.search": {
     "blocks": ["search-result-layout"]
  },
  "search-result-layout": {
     "blocks": [
        "search-result-layout.desktop",
        "search-result-layout.mobile",
        "search-not-found-layout"
     ]
  }
}

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 da search (breadcrumb.search);
Título de busca (search-title.v2);
Total de produtos encontrados (total-products.v2);
Ordenação de produtos (order-by.v2);
Botão de buscar mais abaixo (search-fetch-more);
Botão de buscar mais acima (search-fetch-previous);
Filtro de navegação (filter-navigator.v3);
Resultados de busca (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 uma search-result-layout.desktop que 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.

: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.

vtex-course-hub[bot] commented 3 years ago

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Getting the file :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