Building a custom search landing page

[github-learning-lab[bot]]

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

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

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

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:x::x::x::x::x::x::x::x::x::x::x::x::x::x::x::x::x:

Tests

:x: Request failed with status code 404 :x: There's something wrong with the format of your header.jsonc file :x: You havent declared header.full, header-layout.desktop, header-layout.mobile on you store :x: You haven't stated header-row#notification, header-row#main correctly inside header-layout.desktop. Review their names, positioning and parent block. :x: You haven't stated header-row#notification, header-row#main-mobile, header-row#search correctly inside header-layout.mobile. Review their names, positioning and parent block. :x: You haven't declared header-row#notification, header-row#main on you store :x: You haven't declared header-row#notification, header-row#main-mobile, header-row#search on you store :x: You haven't declared login, logo and rich-text#header on you store :x: You haven't declared login's props showIconProfile, iconLabel properly :x: You haven't declared logo's props url properly :x: You haven't declared rich-text props text, textPosition properly :x: You haven't declared the row header-row#search props and children properly :x: You haven't declared the row header-row#main-mobile props and children properly :x: You haven't declared the row header-row#main props and children properly :x: You haven't declared the row header-row#notification children properly :x: You haven't replaced the Search SVG correctly on iconpack.svg file :x: You haven't replaced the Cart SVG correctly on iconpack.svg file

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

Tests

:white_check_mark: Getting files :white_check_mark: First test - Code compilation :white_check_mark: Your store must contain header full and header layouts desktop and mobile :white_check_mark: Desktop's header rows must be correctly stated :white_check_mark: Mobile's header rows must be correctly stated :white_check_mark: Your store must contain Desktop's Header Rows :white_check_mark: Your store must contain Mobile's Header Rows :white_check_mark: Your store must contain login, logo and rich-text :white_check_mark: Your store must contain correct login props :white_check_mark: Your store must contain correct logo props :white_check_mark: Your store must contain correct rich-text props :white_check_mark: Your store must contain the correct Search row on mobile mode :white_check_mark: Your store must contain the correct main row on mobile mode :x: You haven't declared the row header-row#main props and children properly :white_check_mark: Your store must contain the correct main row on desktop mode :x: You haven't replaced the Search SVG correctly on iconpack.svg file :x: You haven't replaced the Cart SVG correctly on iconpack.svg file

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

Tests

:white_check_mark: Getting files :white_check_mark: First test - Code compilation :white_check_mark: Your store must contain header full and header layouts desktop and mobile :white_check_mark: Desktop's header rows must be correctly stated :white_check_mark: Mobile's header rows must be correctly stated :white_check_mark: Your store must contain Desktop's Header Rows :white_check_mark: Your store must contain Mobile's Header Rows :white_check_mark: Your store must contain login, logo and rich-text :white_check_mark: Your store must contain correct login props :white_check_mark: Your store must contain correct logo props :white_check_mark: Your store must contain correct rich-text props :white_check_mark: Your store must contain the correct Search row on mobile mode :white_check_mark: Your store must contain the correct main row on mobile mode :x: You haven't declared the row header-row#main props and children properly :white_check_mark: Your store must contain the correct main row on desktop mode :x: You haven't replaced the Search SVG correctly on iconpack.svg file :x: You haven't replaced the Cart SVG correctly on iconpack.svg file

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

Tests

:white_check_mark: Getting files :white_check_mark: First test - Code compilation :white_check_mark: Your store must contain header full and header layouts desktop and mobile :white_check_mark: Desktop's header rows must be correctly stated :white_check_mark: Mobile's header rows must be correctly stated :white_check_mark: Your store must contain Desktop's Header Rows :white_check_mark: Your store must contain Mobile's Header Rows :white_check_mark: Your store must contain login, logo and rich-text :white_check_mark: Your store must contain correct login props :white_check_mark: Your store must contain correct logo props :white_check_mark: Your store must contain correct rich-text props :white_check_mark: Your store must contain the correct Search row on mobile mode :white_check_mark: Your store must contain the correct main row on mobile mode :x: You haven't declared the row header-row#main props and children properly :white_check_mark: Your store must contain the correct main row on desktop mode :white_check_mark: Search SVG should be correctly placed on iconpack :x: You haven't replaced the Cart SVG correctly on iconpack.svg file

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::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 files :white_check_mark: First test - Code compilation :white_check_mark: Your store must contain header full and header layouts desktop and mobile :white_check_mark: Desktop's header rows must be correctly stated :white_check_mark: Mobile's header rows must be correctly stated :white_check_mark: Your store must contain Desktop's Header Rows :white_check_mark: Your store must contain Mobile's Header Rows :white_check_mark: Your store must contain login, logo and rich-text :white_check_mark: Your store must contain correct login props :white_check_mark: Your store must contain correct logo props :white_check_mark: Your store must contain correct rich-text props :white_check_mark: Your store must contain the correct Search row on mobile mode :white_check_mark: Your store must contain the correct main row on mobile mode :white_check_mark: Your store must contain the correct main row on desktop mode :white_check_mark: Your store must contain the correct main row on desktop mode :white_check_mark: Search SVG should be correctly placed on iconpack :white_check_mark: Cart SVG should be correctly placed on iconpack

[github-learning-lab[bot]]

¡Ha completado este paso con éxito!

Vaya al siguiente paso!