Building a custom search landing page

[github-learning-lab[bot]]

Construindo uma landing customizada de busca

:sparkles: Branch: landing

Introdução

No step anterior, você pôde aprender um pouco mais sobre como criar um template customizado. É muito comum que, em cenários de promoção e datas comemorativas, seja necessário criar landing pages especiais.

Buscas customizadas

Vimos que a busca infere o que precisa pelo contexto que está inclusa. Numa página customizada, no entanto, o contexto não existe e é preciso que se defina qual a query deve ser realizada para inferir os resultados. Tudo isso é possível através do search-result-layout.customQuery.

Query schema

A query schema é uma das props do search result custom query com ela é possível controlar a busca que a nossa landing page deverá fazer. Para saber todas as possibilidades da query schema, veja sua documentação aqui.

Atividade

1. Defina uma rota nova (store.custom#landing) no arquivo routes.json;

   "store.custom#landing": {
     "path": "/landing"
   }

2. Crie um novo arquivo na pasta de blocos chamado search-landing.jsonc;

3. Crie um novo template custom store.custom#landing;

4. Defina o bloco image como um dos blocos desse template. Este bloco deve possuir props minWidth de 100% e uma imagem a sua escolha.

5. Faça o mesmo com o search-result-layout.customQuery:

   {
     "store.custom#landing": { 
       "blocks": [
         "image#landingbanner", 
         "search-result-layout.customQuery"
       ]
     }
   }

6. Defina o bloco search-result-layout.customQuery com prop de querySchema que:

   • Ordena por data de lançamento de forma descrescente;
   • Esconda itens indisponíveis;
   • Mostre um máximo de 8 itens por página;
   • Use como query "Blue Top Retro Camera".

---

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

Oopsie, something went wrong :crying_cat_face:

Results

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

Tests

:white_check_mark: Getting the files :white_check_mark: Code compilation :white_check_mark: Define a new route :white_check_mark: Define a store.custom block :x: You didn't use image block on the store.custom blocks and define it with a src and minWidth of 100% :white_check_mark: Use search-result-layout.customQuery block on the store.custom blocks and define it :white_check_mark: Define the customQuery 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::x::white_check_mark::white_check_mark:

Tests

:white_check_mark: Getting the files :white_check_mark: Code compilation :white_check_mark: Define a new route :white_check_mark: Define a store.custom block :x: You didn't use image block on the store.custom blocks and define it with a src and minWidth of 100% :white_check_mark: Use search-result-layout.customQuery block on the store.custom blocks and define it :white_check_mark: Define the customQuery 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: Getting the files :white_check_mark: Code compilation :white_check_mark: Define a new route :white_check_mark: Define a store.custom block :white_check_mark: Use image block on the store.custom blocks and define the banner :white_check_mark: Use search-result-layout.customQuery block on the store.custom blocks and define it :white_check_mark: Define the customQuery props

[github-learning-lab[bot]]

Você terminou este passo com sucesso!

Vá para o próximo passo