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
In the search.jsonc file, remove total-products.v2 and order-by.v2 from search-result-layout.desktop.
Replace both with a line that includes the removed blocks: json ... "flex-layout.row#top": { "children":["total-products.v2", "order-by.v2"]} ...
Remove search-content and filter-navigator.v3 from search-result-layout.desktop and create a results line;
Place two columns in the results line: json { ... "search-result-layout.desktop": { "children": [ "breadcrumb.search", "search-title.v2", "flex-layout.row#top", "search-fetch-previous", "flex-layout.row#results", "search-fetch-more" ], "props": { "pagination": "show-more" } }, "flex-layout.row#results": { "children": [ "flex-layout.col#filter", "flex-layout.col#search" ] }, ... }
Set the filter column's width prop to 20%.
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.
Define your search-content with the gallery and not-found blocks: json { ... "search-content": { "blocks": ["gallery", "not-found"] } ... }
Use product-summary.shelf in the Gallery's props: json { ... "search-content": { "blocks": ["gallery", "not-found"] }, "gallery": { "blocks": ["product-summary.shelf"] } ... }
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.
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
search.jsoncfile, removetotal-products.v2andorder-by.v2fromsearch-result-layout.desktop.json ... "flex-layout.row#top": { "children":["total-products.v2", "order-by.v2"]} ...search-contentandfilter-navigator.v3fromsearch-result-layout.desktopand create a results line;json { ... "search-result-layout.desktop": { "children": [ "breadcrumb.search", "search-title.v2", "flex-layout.row#top", "search-fetch-previous", "flex-layout.row#results", "search-fetch-more" ], "props": { "pagination": "show-more" } }, "flex-layout.row#results": { "children": [ "flex-layout.col#filter", "flex-layout.col#search" ] }, ... }filtercolumn'swidthprop to20%.filter-navigator.v3again and, in the right, includesearch-content. To finish, we'll use the same product summary (product-summary) that we used to display search results on the shelf.search-contentwith thegalleryandnot-foundblocks:json { ... "search-content": { "blocks": ["gallery", "not-found"] } ... }product-summary.shelfin the Gallery's props:json { ... "search-content": { "blocks": ["gallery", "not-found"] }, "gallery": { "blocks": ["product-summary.shelf"] } ... }product-summary.shelfblock, found indefault.jsonc, includeproduct-summary-sku-selectoraboveproduct-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.