wandreus / store-framework

https://lab.github.com/vtex-trainings/store-framework
0 stars 0 forks source link

Página de busca #14

Open github-learning-lab[bot] opened 4 years ago

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

Página de busca

:sparkles: Branch: search

Introdução

image

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:

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:

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

Atividade

image

Copie o código acima no arquivo search.jsonc e defina uma search-result-layout.desktop que tenha:

E tenha como filhos, nesta ordem:

: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] commented 4 years ago

Você terminou este passo com sucesso!

Vá para o próximo passo:

Ajustando layout da página de busca

vtex-course-hub[bot] commented 4 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: 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