Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::white_check_mark::x::x::x::x::x::x::x::x::white_check_mark::white_check_mark::x:
: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
: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: 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
: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: 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
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
In the
search.jsonc
file, removetotal-products.v2
andorder-by.v2
fromsearch-result-layout.desktop
.Replace both with a line that includes the removed blocks:
Remove
search-content
andfilter-navigator.v3
fromsearch-result-layout.desktop
and create a results line;Place two columns in the results line:
Set the
filter
column'swidth
prop to20%
.In the left column, include
filter-navigator.v3
again 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.Define your
search-content
with thegallery
andnot-found
blocks:Use
product-summary.shelf
in the Gallery's props:In the
product-summary.shelf
block, found indefault.jsonc
, includeproduct-summary-sku-selector
aboveproduct-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.