Adjusting the search page's layout

[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"
       ]
     },
     "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í.

[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

[github-learning-lab[bot]]

¡Ha completado este paso con éxito!

Vaya al siguiente paso!