Página de pesquisa

Introdução

Acabamos de implementar nossa página de produto e estamos avançando para a página de pesquisa. Ambos são semelhantes no sentido de que ambos têm blocos que são únicos neste contexto. Vamos explorar os blocos de forma desordenada, sem pensar no design da página, por enquanto, apenas para ter uma ideia de seu comportamento.

Começando com o Search Layout

Da mesma forma que outros modelos, store.search também pode ser flexível. Para construir um layout único, você precisará usar um bloco chamado search-result-layout.

{
  "store.search": {
    "blocks": ["search-result-layout"]
  }
}

O search-result-layout, por sua vez, deve conter outros 3 blocos:

• search-result-layout.desktop
• search-result-layout.mobile
• search-not-found-layout

Como você já percebeu, os dois primeiros definem qual layout será exibido no desktop e celular respectivamente, enquanto o terceiro define o layout da página de pesquisa sem resultados.

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

Nesse curso, vamos focar na implementação do layout para desktop.

Blocos de Busca

A documentação dos resultados da pesquisa oferece uma boa referência para blocos que podem ser usados ​​em um contexto de pesquisa. Esta etapa se concentrará em destacar os principais:

• Breadcrumb de pesquisa (breadcrumb.search);
• Título de pesquisa (search-title.v2);
• Total de produtos encontrados (total-products.v2);
• Ordenação de produtos (order-by.v2);
• Botão Mostrar mais resultados (search-fetch-more);
• Mostrar botão de resultados anteriores (search-fetch-previous);
• Filtro de navegação (filter-navigator.v3);
• Resultados da pesquisa (search-content)

Embora serem muitos, todos esses blocos são relativamente simples e funcionam muito bem sem a necessidade expressa de configurar suas props.

Atividade

Copie os códigos acima no arquivo search.jsonc e defina a search-result-layout.desktop contendo o seguinte, na ordem abaixo:

• breadcrumb.search;
• search-title.v2;
• total-products.v2;
• order-by.v2;
• search-fetch-previous;
• search-content;
• filter-navigator.v3;
• search-fetch-more.

Para isso, escreva um código similar a este:

...
  },
  "search-result-layout.desktop": {
    "children": [
      "breadcrumb.search",
      "search-title.v2",
      "total-products.v2",
      "order-by.v2",
      "search-fetch-previous",
      "search-content",
      "filter-navigator.v3",
      "search-fetch-more"
    ]
  }
...

Note: Lembre-se de olhar a documentação caso tenha dúvidas ao longo da atividade.

Está com dúvidas?

Veja o gabarito para esta etapa ou acompanhe nosso [office hours] no canal VTEX Developers(https://www.youtube.com/c/VTEXDevelopers)

Parabéns, você terminou o curso!

Ainda tem tempo sobrando?

Tenta nosso desafio para este curso!