Search page

[github-learning-lab[bot]]

Página de búsqueda

:sparkles: Branch: search

Introducción

Hemos terminado de implementar nuestra página de producto y pasaremos a la página de búsqueda. Ambas son muy similares en el sentido de que tienen bloques que son exclusivos de este contexto. Exploraremos este bloque de forma desordenada en este step, solo para entender su comportamiento, y continuaremos mejorando el diseño en el siguiente paso.

Search Layout

store.search, como otros templates, también puede ser flexible. Para construir un layout único, es necesario usar un bloque llamado search-result-layout .

{
  "store.search": {
     "blocks": ["search-result-layout"]
  }
}

search-result-layout, a su vez, debe recibir otros tres bloques:

• search-result-layout.desktop
• search-result-layout.mobile
• search-not-found-layout

Como usted ya debe haber notado, los dos primeros definen cuál layout se mostrará en desktop y mobile, respectivamente, y el tercero define el layout de la página de resultados no encontrados.

{
  "store.search": {
     "blocks": ["search-result-layout"]
  },
  "search-result-layout": {
     "blocks": [
        "search-result-layout.desktop",
        "search-result-layout.mobile",
        "search-not-found-layout"
     ]
  }
}

En el curso, nos centraremos en implementar layout de desktop

Bloques de search

La documentación de Search Result ofrece una buena referencia de los bloques que pueden usarse en el contexto de búsqueda. En este step nos centraremos en tratar de mostrar los principales:

• Breadcrumb de search (breadcrumb.search) .
• Título de búsqueda (search-title.v2) .
• Total de productos encontrados (total-products.v2) .
• Orden de productos (order-by.v2) .
• Botón de búsqueda más abajo (search-fetch-more) .
• Botón de búsqueda más arriba (search-fetch-previous) .
• Filtro de navegación (filter-navigator.v3) .
• Resultados de búsqueda (search-content) .

Aunque son muchos, todos estos bloques son relativamente simples y funcionan muy bien sin mucha necesidad de configurar sus props .

Actividad

Copie el código anterior en el archivo search.jsonc y defina un search-result-layout.desktop que tenga como hijos, en este orden:

• breadcrumb.search
• search-title.v2
• total-products.v2
• order-by.v2
• search-fetch-previous
• search-content
• filter-navigator.v3
• search-fetch-more

:information_source: Recuerde acceder a la documentación del Search Result 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]]

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:

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Use search-result-layout on the store.search :white_check_mark: Define search-result-layout :white_check_mark: Use search-result-layout.desktop on the search-result-layout :white_check_mark: Define search-result-layout.desktop :x: You did't use all of the expected components (breadcrumb.search, search-title.v2, total-products.v2, order-by.v2, search-fetch-previous, search-content, filter-navigator.v3, search-fetch-more)

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:

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Use search-result-layout on the store.search :white_check_mark: Define search-result-layout :white_check_mark: Use search-result-layout.desktop on the search-result-layout :white_check_mark: Define search-result-layout.desktop :white_check_mark: Define search components

[github-learning-lab[bot]]

¡Ha completado este paso con éxito!

Vaya al siguiente paso!