Construyendo un landing personalizado de búsqueda

[github-learning-lab[bot]]

Construyendo un landing personalizado de búsqueda

:sparkles: Branch: searchlanding

Introducción

En el step anterior, pudo aprender un poco más sobre cómo crear un template personalizado. Es muy común que, en escenarios de promoción y fechas conmemorativas, sea necesario crear landing pages especiales.

Búsquedas personalizadas

Vimos que la búsqueda infiere lo que necesita por el contexto en que se incluye. En una página personalizada, sin embargo, el contexto no existe y es necesario definir cuál query se debe realizar para inferir los resultados. Todo esto es posible a través de search-result-layout.customQuery .

Query schema

Query schema es una de las props de search result custom query con el que puede controlar la búsqueda que debería hacer nuestro landing page. Para conocer todas las posibilidades de query schema, vea su documentación aquí.

Actividad

1. Defina una ruta nueva (store.custom#landing) en el archivo routes.json .

"store.custom#landing": {
  "path": "/landing"
}

2. Cree un nuevo archivo en la carpeta de bloques llamado search-landing.jsonc .
3. Cree un nuevo template custom store.custom#landing .
4. Defina el bloque image como uno de los bloques de este template. Este bloque debe tener props minWidth de 100% y una imagen de su elección.
5. Haga lo mismo con search-result-layout.customQuery:

{
  "store.custom#landing": { 
    "blocks": [
      "image#landingbanner", 
      "search-result-layout.customQuery"
    ]
  }
}

6. Defina el bloque search-result-layout.customQuery con prop de querySchema que:
   • Ordene por fecha de lanzamiento de forma descendente.
   • Esconda ítems indisponibles.
   • Muestre un máximo de 8 ítems por página.
   • Use como query "Blue Top Retro Camera".
   • Use como mapField ft .

---

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

¡Ha completado este paso con éxito!

Vaya al siguiente paso:

Cabecera de la tienda

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

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

Tests

:white_check_mark: Code compilation :white_check_mark: Define a new route :white_check_mark: Define a store.custom block :x: You didn't use image block on the store.custom blocks and define it with a src and minWidth of 100% :white_check_mark: Use search-result-layout.customQuery block on the store.custom blocks and define it :x: You didn't define all the expected search-result-layout.customQuery props

Try again :grin:

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

Tests

:white_check_mark: Code compilation :white_check_mark: Define a new route :white_check_mark: Define a store.custom block :white_check_mark: Use image block on the store.custom blocks and define the banner :white_check_mark: Use search-result-layout.customQuery block on the store.custom blocks and define it :x: You didn't define all the expected search-result-layout.customQuery props

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:

Tests

:white_check_mark: Code compilation :white_check_mark: Define a new route :white_check_mark: Define a store.custom block :white_check_mark: Use image block on the store.custom blocks and define the banner :white_check_mark: Use search-result-layout.customQuery block on the store.custom blocks and define it :white_check_mark: Define the customQuery props