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

Construyendo un landing personalizado de búsqueda

:sparkles: Branch: landing

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

Defina una ruta nueva (store.custom#landing) en el archivo routes.json .
```
"store.custom#landing": {
  "path": "/landing"
}
```
Cree un nuevo archivo en la carpeta de bloques llamado search-landing.jsonc .
Cree un nuevo template custom store.custom#landing .
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.

Haga lo mismo con search-result-layout.customQuery:

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

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 "Camera".

Hasta ahora, probablemente no es posible ver el bloque en la landing page. Esto ocurre porque no has añadido un bloque al search-result-layout.customQuery. Para esto, añada las siguientes líneas:

// store/blocks/search-landing.jsonc
{
    ...
    "search-result-layout.customQuery": {
        "props": {
            "querySchema": {
                "orderByField": "OrderByReleaseDateDESC",
                "hideUnavailableItems": true,
                "maxItemsPerPage": 8,
                "queryField": "Camera",
                "mapField": "ft",
                "skusFilter": "ALL_AVAILABLE"
            }
        },
+       "blocks": [
+         "search-result-layout.desktop"
+       ]
    }
}

: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

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

JeissonSerpa / store-framework

Building a custom search landing page #21