Adjusting the search page's layout

[github-learning-lab[bot]]

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

1. No arquivo search.jsonc, remova total-products.v2 e order-by.v2 do search-result-layout.desktop.

2. Substitua ambos acima por uma linha de topo que inclua os blocos removidos:

   ...
   "flex-layout.row#top": {
     "children": [
       "total-products.v2",
       "order-by.v2"
     ]
   }
   ...

3. Remova o search-content e o filter-navigator.v3 do search-result-layout.desktop e crie uma linha de resultados;

4. Na linha de resultado coloque outras duas colunas:

   {
     ...
     "search-result-layout.desktop": {
       "children": [
         "breadcrumb.search",
         "search-title.v2",
         "flex-layout.row#top",
         "search-fetch-previous",
         "flex-layout.row#results",
         "search-fetch-more"
       ]
     },
     "flex-layout.row#results": {
       "children": [
         "flex-layout.col#filter",
         "flex-layout.col#search"
       ]
     },
     ...
   }

5. Configure a prop width da coluna filter para 20%.

6. Na coluna da esquerda inclua o filter-navigator.v3 novamente e, na da direita, inclua o search-content

Para finalizar, vamos usar o mesmo Resumo de Produto(product-summary) que usamos na shelf para exibir os resultados de busca.

7. Defina seu search-content com os blocos gallery e not-found:

   {
     ...
     "search-content": {
       "blocks": ["gallery", "not-found"]
     }
     ...
   }

8. Use o product-summary.shelf nas props da Gallery:

   {
     ...
     "search-content": {
       "blocks": ["gallery", "not-found"]
     },
     "gallery": {
       "blocks": ["product-summary.shelf"]
     }
     ...
   }

9. No blocoproduct-summary.shelf que se encontra no arquivo default.jsonc, inclua product-summary-sku-selector acima de product-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.

[github-learning-lab[bot]]

Você terminou este passo com sucesso!

Vá para o próximo passo

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

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

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :x: The third and fifth element of your search-result-layout.desktop are not rows :x: The top row doesn't 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 :x: You didn't include product-summary-sku-selector in product-summary.shelf

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

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

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :x: The third and fifth element of your search-result-layout.desktop are not rows :x: The top row doesn't 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

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

Tests

:white_check_mark: Getting the file :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