Open github-learning-lab[bot] opened 3 years ago
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark:
: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
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
: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
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
Defina uma rota nova (
store.custom#landing
) no arquivoroutes.json
;Crie um novo arquivo na pasta de blocos chamado
search-landing.jsonc
;Crie um novo template custom
store.custom#landing
;Defina o bloco
image
como um dos blocos desse template. Este bloco deve possuir propsminWidth
de 100% e uma imagem a sua escolha.Faça o mesmo com o
search-result-layout.customQuery
:Defina o bloco
search-result-layout.customQuery
com prop de querySchema que:Neste ponto, é provável que você não esteja vendo o bloco na nova página. Isso se deve ao fato de que ainda não adicionamos nenhum bloco ao
search-result-layout.customQuery
. Você pode fazer isso adicionando as seguintes linhas::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.