github-learning-lab[bot] commented 3 years ago

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] commented 3 years ago

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