Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::x::white_check_mark::x::x::x::x::x::x::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Code compilation
:x: The third and fifth element of your search-result-layout.desktop
are not rows
:white_check_mark: Top row should have total-products.v2
and order-by.v2
:x: There aren't two columns inside the results row
:x: You didn't define the left column of the results row
:x: You didn't define the right column of the results row
:x: You didn't use the filter-navigator.v3
on the left column of the results row
:x: You didn't use the search-content
on the right column of the results row
:x: There's no prop width
defined on the left column
:white_check_mark: Use gallery and not-found blocks on the search content
:white_check_mark: Use shelf's product summary in the search gallery
:white_check_mark: Include SKU Selector in all shelves
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Code compilation
:white_check_mark: Make the third and fifth element, of your search result desktop layout, rows
:white_check_mark: Top row should have total-products.v2
and order-by.v2
:white_check_mark: Use two columns inside the results row
:white_check_mark: Define the left column of the results row
:white_check_mark: Define the right column of the results row
:white_check_mark: Use the filter navigator on the left column of the results row
:white_check_mark: Use the search content on the right column of the results row
:white_check_mark: Set the width of the left column of the results row
:white_check_mark: Use gallery and not-found blocks on the search content
:white_check_mark: Use shelf's product summary in the search gallery
:white_check_mark: Include SKU Selector in all shelves
Ajustando layout da página de busca
:sparkles: Branch: search2
Introdução
No último step conhecemos a página de busca e seus principais componentes. Também aprendemos que o layout de search funciona como qualquer outro bloco tendo, portanto, toda a flexibilidade ao seu alcance. Nesse step criaremos algumas linhas e colunas para melhorar a aparência da busca criada.
Atividade
No arquivo
search.jsonc
, removatotal-products.v2
eorder-by.v2
dosearch-result-layout.desktop
.Substitua ambos acima por uma linha de topo que inclua os blocos removidos:
Remova o
search-content
e ofilter-navigator.v3
dosearch-result-layout.desktop
e crie uma linha de resultados;Na linha de resultado coloque outras duas colunas:
Configure a prop
width
da colunafilter
para20%
.Na coluna da esquerda inclua o
filter-navigator.v3
novamente e, na da direita, inclua osearch-content
Para finalizar, vamos usar o mesmo Resumo de Produto(
product-summary
) que usamos na shelf para exibir os resultados de busca.search-content
com os blocosgallery
enot-found
:product-summary.shelf
nas props da Gallery:product-summary.shelf
que se encontra no arquivodefault.jsonc
, incluaproduct-summary-sku-selector
acima deproduct-summary-buy-button
.:information_source: Lembre-se de acessar a documentação do Flex Layout 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.