search

eugeniorubenjauregui / store-framework

https://lab.github.com/vtex-trainings/store-framework
0 stars 0 forks source link

Search page #15

Open github-learning-lab[bot] opened 3 years ago

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

Página de búsqueda

:sparkles: Branch: search

Introducción

image

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:

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:

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

Actividad

image

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

: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í.

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

¡Ha completado este paso con éxito!

Vaya al siguiente paso!

vtex-course-hub[bot] commented 3 years ago

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::x::white_check_mark::x::x::x::x::x::x::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :x: The third and fifth element of your search-result-layout.desktop are not rows :white_check_mark: Top row should have total-products.v2 and order-by.v2 :x: There aren't two columns inside the results row :x: You didn't define the left column of the results row :x: You didn't define the right column of the results row :x: You didn't use the filter-navigator.v3 on the left column of the results row :x: You didn't use the search-content on the right column of the results row :x: There's no prop width defined on the left column :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

Try again :grin:

vtex-course-hub[bot] commented 3 years ago

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::x::white_check_mark::x::x::x::x::x::x::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :x: The third and fifth element of your search-result-layout.desktop are not rows :white_check_mark: Top row should have total-products.v2 and order-by.v2 :x: There aren't two columns inside the results row :x: You didn't define the left column of the results row :x: You didn't define the right column of the results row :x: You didn't use the filter-navigator.v3 on the left column of the results row :x: You didn't use the search-content on the right column of the results row :x: There's no prop width defined on the left column :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

Try again :grin:

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::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