Adjusting the search page's layout

[github-learning-lab[bot]]

Adjusting the search page's layout

:sparkles: Branch: search2

Introduction

In the last step, we've looked at the search page and its main components. We also learned that the search layout works like any other block, with the added benefit of having all the flexibility it can muster. In this step, we'll create some lines and columns to improve the appearance of the created search.

Activity

1. In the search.jsonc file, remove total-products.v2 and order-by.v2 from search-result-layout.desktop.

2. Replace both with a line that includes the removed blocks:

   ...
   "flex-layout.row#top": {
     "children": [
       "total-products.v2",
       "order-by.v2"
     ]
   }
   ...

3. Remove search-content and filter-navigator.v3 from search-result-layout.desktop and create a results line;

4. Place two columns in the results line:

   {
     ...
     "search-result-layout.desktop": {
       "children": [
         "breadcrumb.search",
         "search-title.v2",
         "flex-layout.row#top",
         "search-fetch-previous",
         "flex-layout.row#results",
         "search-fetch-more"
       ]
     },
     "flex-layout.row#results": {
       "children": [
         "flex-layout.col#filter",
         "flex-layout.col#search"
       ]
     },
     ...
   }

5. Set the filter column's width prop to 20%.

6. In the left column, include filter-navigator.v3 again and, in the right, include search-content. To finish, we'll use the same product summary (product-summary) that we used to display search results on the shelf.

7. Define your search-content with the gallery and not-found blocks:

   {
     ...
     "search-content": {
       "blocks": ["gallery", "not-found"]
     }
     ...
   }

8. Use product-summary.shelf in the Gallery's props:

   {
     ...
     "search-content": {
       "blocks": ["gallery", "not-found"]
     },
     "gallery": {
       "blocks": ["product-summary.shelf"]
     }
     ...
   }

9. In the product-summary.shelf block, found in default.jsonc, include product-summary-sku-selector above product-summary-buy-button.

:information_source: Remember to access the Flex Layout documentation if you have any questions during the activity.

---

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

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :x: The third and fifth element of your search-result-layout.desktop are not rows :x: The top row doesn't have total-products.v2 and order-by.v2 :x: There aren't two columns inside the results row :x: You didn't define the left column of the results row :x: You didn't define the right column of the results row :x: You didn't use the filter-navigator.v3 on the left column of the results row :x: You didn't use the search-content on the right column of the results row :x: There's no prop width defined on the left column :white_check_mark: Use gallery and not-found blocks on the search content :white_check_mark: Use shelf's product summary in the search gallery :x: You didn't include product-summary-sku-selector in product-summary.shelf

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

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Make the third and fifth element, of your search result desktop layout, rows :white_check_mark: Top row should have total-products.v2 and order-by.v2 :white_check_mark: Use two columns inside the results row :white_check_mark: Define the left column of the results row :white_check_mark: Define the right column of the results row :white_check_mark: Use the filter navigator on the left column of the results row :white_check_mark: Use the search content on the right column of the results row :white_check_mark: Set the width of the left column of the results row :white_check_mark: Use gallery and not-found blocks on the search content :white_check_mark: Use shelf's product summary in the search gallery :x: You didn't include product-summary-sku-selector in product-summary.shelf

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:

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Make the third and fifth element, of your search result desktop layout, rows :white_check_mark: Top row should have total-products.v2 and order-by.v2 :white_check_mark: Use two columns inside the results row :white_check_mark: Define the left column of the results row :white_check_mark: Define the right column of the results row :white_check_mark: Use the filter navigator on the left column of the results row :white_check_mark: Use the search content on the right column of the results row :white_check_mark: Set the width of the left column of the results row :white_check_mark: Use gallery and not-found blocks on the search content :white_check_mark: Use shelf's product summary in the search gallery :white_check_mark: Include SKU Selector in all shelves

[github-learning-lab[bot]]

You have successfully completed this step!

Go to the next step!