Ajustando layout da página de busca

[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"
    ],
    "props": {
      "pagination": "show-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:

Estilos globais

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

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

Tests

: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 :x: You didn't use the blocks gallery and not-found on the search-content's blocks :x: You didn't use product-summary.shelf in the gallery's blocks :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::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

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

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:

Tests

: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