Ajustando layout de página de búsqueda

[github-learning-lab[bot]]

Ajustando layout de página de búsqueda

:sparkles: Branch: search2

Introducción

En el último step conocimos la página de búsqueda y sus componentes principales. También aprendimos que el layout de search funciona como cualquier otro bloque, por lo que tiene toda la flexibilidad a su alcance. En este step crearemos algunas líneas y columnas para mejorar el aspecto de la búsqueda creada.

Actividad

1. En el archivo search.jsonc, elimine total-products.v2 y order-by.v2 del search-result-layout.desktop .

2. Reemplace los dos anteriores con una línea top que incluya los bloques eliminados:

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

3. Elimine el search-content y el filter-navigator.v3 del search-result-layout.desktop y cree una línea de resultado.

4. En la línea de resultado, coloque otras dos columnas:

{
  ...
  "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 la prop width de la columna filter en 20%.

6. En la columna de la izquierda incluya el filter-navigator.v3 nuevamente y, en la de la derecha, incluya el search-content .

Para finalizar, usaremos el mismo Resumen de Produto (product-summary) que usamos en el shelf para mostrar los resultados de búsqueda.

7. Defina su search-content con los bloques gallery y not-found:

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

8. Use el product-summary.shelf en las props de Gallery:

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

9. En el bloque product-summary.shelf que se encuentra en el archivo default.jsonc, incluya product-summary-sku-selector arriba de product-summary-buy-button .

:information_source: Recuerde acceder a la documentación del Flex Layout si tiene alguna duda durante la actividad.

---

:no_entry_sign: ¿Perdido?

¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? :pray:

Crear feedback

---

Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.

[github-learning-lab[bot]]

¡Ha completado este paso con éxito!

Vaya al siguiente paso:

Estilos globales

[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