Building a custom search landing page

[github-learning-lab[bot]]

Building a custom search landing page

:sparkles: Branch: landing

Introduction

In the previous step, we looked at creating a custom template. In scenarios involving promotions and commemorative dates, it's quite common to create special landing pages.

Custom searches

We saw that the search deduces what is needed from the given context. On a custom page however, the context doesn't exist and you need to state which query should be performed to get the results. All this is made possible by the search-result-layout.customQuery.

Query schema

The query schema is one of the custom query search result props that allows you to control the search that the landing page should run. To know more the query schema's possibilities, read through its documentation.

Activity

1. Define a new path (store.custom#landing) in routes.json;

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

2. Create a new file called search-landing.jsonc in the blocks folder;

3. Create a new custom template entitled store.custom#landing;

4. Define the image block as one of this template's blocks. This block must have minWidth props of 100% and an image of your choosing.

5. Repeat the same with search-result-layout.customQuery:

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

6. Define the search-result-layout.customQuery block as the querySchema prop that:

   • Sorts by latest release date;
   • Hides unavailable items;
   • Displays a max of 8 items per page;
   • Uses "Camera" as query.

7. At this point, you're probably not seeing the block on the landing page. This is due to the fact that we have not add a block to the search-result-layout.customQuery yet. You can do that by adding the following lines:

   // 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: Are you lost?

Is there any problem with this step? What about sending us a feedback? :pray:

Submit feedback

---

If you're still unsure as to how to send your answers, click here.

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

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

[github-learning-lab[bot]]

You have successfully completed this step!

Go to the next step!