Search page

[github-learning-lab[bot]]

Search page

:sparkles: Branch: search

Introduction

We've just implemented our product page and are moving on to the search page. Both are similar in the sense that both have blocks that are unique in this context. We will explore this block in a disorderly fashion for now, just to get an idea of its behavior. Then, we'll look at improving the layout.

Search Layout

Same as other templates, store.search can also be flexible. To build a unique layout you'll need to use a block called search-result-layout.

{
  "store.search": {
     "blocks": ["search-result-layout"]
  }
}

The search-result-layout, in turn, must receive 3 other blocks:

• search-result-layout.desktop
• search-result-layout.mobile
• search-not-found-layout

As you've already notice, the first two define which layout will be displayed on desktop and mobile respectively, while the third defines the layout of the no results found search page.

{
  "store.search": {
     "blocks": ["search-result-layout"]
  },
  "search-result-layout": {
     "blocks": [
        "search-result-layout.desktop",
        "search-result-layout.mobile",
        "search-not-found-layout"
     ]
  }
}

In the course, we'll focus on desktop layout implementation.

Search blocks

The search results documentation offers a good reference for blocks that can be use in a search context. This step will focus on highlighting the main ones:

• Search breadcrumb (breadcrumb.search);
• Search title (search-title.v2);
• Total products found (total-products.v2);
• Product ordering (order-by.v2);
• Show more results button (search-fetch-more);
• Show previous results button (search-fetch-previous);
• Navigation filter (filter-navigator.v3);
• Search results (search-content)

Although quite many, all these blocks are relatively simple and work very well without an express need to configure their props.

Activity

Copy the code above in search.jsonc and define a search-result-layout.desktop having the following, in the order mentioned below:

• breadcrumb.search;
• search-title.v2;
• total-products.v2;
• order-by.v2;
• search-fetch-previous;
• search-content;
• filter-navigator.v3;
• search-fetch-more.

:information_source: Remember to go through the Search Result documentation if you have any questions during the activity.

---

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

[github-learning-lab[bot]]

You have successfully completed this step!

Go to the next step!

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

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

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :x: You didn't use search-result-layout on the store.search blocks :x: You didn't define search-result-layout :x: You did't use search-result-layout.desktop on the search-result-layout :white_check_mark: Define search-result-layout.desktop :x: You did't use all of the expected components (breadcrumb.search, search-title.v2, total-products.v2, order-by.v2, search-fetch-previous, search-content, filter-navigator.v3, search-fetch-more)

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

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Use search-result-layout on the store.search :white_check_mark: Define search-result-layout :white_check_mark: Use search-result-layout.desktop on the search-result-layout :white_check_mark: Define search-result-layout.desktop :x: You did't use all of the expected components (breadcrumb.search, search-title.v2, total-products.v2, order-by.v2, search-fetch-previous, search-content, filter-navigator.v3, search-fetch-more)

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 file :white_check_mark: Code compilation :white_check_mark: Use search-result-layout on the store.search :white_check_mark: Define search-result-layout :white_check_mark: Use search-result-layout.desktop on the search-result-layout :white_check_mark: Define search-result-layout.desktop :white_check_mark: Define search components