Ajustando layout de página de búsqueda

[github-learning-lab]

Ajustando layout de página de búsqueda

✨ 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 .

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

---

🚫 ¿Perdido?

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

Crear feedback

---

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

[vtex-course-hub]

Oopsie, something went wrong 😿

Results

✅✅❌❌❌❌❌❌❌❌✅✅✅

Tests

✅ Getting the file
✅ Code compilation
❌ The third and fifth element of your search-result-layout.desktop are not rows
❌ The top row doesn't have total-products.v2 and order-by.v2
❌ There aren't two columns inside the results row
❌ You didn't define the left column of the results row
❌ You didn't define the right column of the results row
❌ You didn't use the filter-navigator.v3 on the left column of the results row
❌ You didn't use the search-content on the right column of the results row
❌ There's no prop width defined on the left column
✅ Use gallery and not-found blocks on the search content
✅ Use shelf's product summary in the search gallery
✅ Include SKU Selector in all shelves

Try again 😁

[vtex-course-hub]

Oopsie, something went wrong 😿

Results

✅✅✅✅❌❌❌❌❌❌✅✅✅

Tests

✅ Getting the file
✅ Code compilation
✅ Make the third and fifth element, of your search result desktop layout, rows
✅ Top row should have total-products.v2 and order-by.v2
❌ There aren't two columns inside the results row
❌ You didn't define the left column of the results row
❌ You didn't define the right column of the results row
❌ You didn't use the filter-navigator.v3 on the left column of the results row
❌ You didn't use the search-content on the right column of the results row
❌ There's no prop width defined on the left column
✅ Use gallery and not-found blocks on the search content
✅ Use shelf's product summary in the search gallery
✅ Include SKU Selector in all shelves

Try again 😁

[vtex-course-hub]

You did great! 😁

Results

✅✅✅✅✅✅✅✅✅✅✅✅✅

Tests

✅ Getting the file
✅ Code compilation
✅ Make the third and fifth element, of your search result desktop layout, rows
✅ Top row should have total-products.v2 and order-by.v2
✅ Use two columns inside the results row
✅ Define the left column of the results row
✅ Define the right column of the results row
✅ Use the filter navigator on the left column of the results row
✅ Use the search content on the right column of the results row
✅ Set the width of the left column of the results row
✅ Use gallery and not-found blocks on the search content
✅ Use shelf's product summary in the search gallery
✅ Include SKU Selector in all shelves

[github-learning-lab]

¡Ha completado este paso con éxito!

Vaya al siguiente paso:

Estilos globales