Página de busca

[github-learning-lab[bot]]

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:

• Tipo de paginação como 'Show more' (veja a prop 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.

---

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

[github-learning-lab[bot]]

Você terminou este passo com sucesso!

Vá para o próximo passo:

Ajustando layout da página de busca

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x:

Tests

: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 :x: You did't use all of the expected components (breadcrumb.search, search-title.v2, total-products.v2, order-by.v2, search-fetch-previous, search-content, filter-navigator.v3, search-fetch-more) :x: You did't use pagination and preventRouteChange on search-result-layout.desktop's props

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:

Tests

: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

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:

Tests

: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

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:

Tests

: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

Try again :grin:

[vtex-course-hub[bot]]

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