Closed github-learning-lab[bot] closed 4 years ago
: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
Making your content responsive
:sparkles: Branch: responsive
Introduction
An e-commerce's homepage is always the client's first contact with the brand. Therefore, it's common for retailers to want to establish direct communication with their users at this strategic point in time during navigation.
Several components in Store Framework serve this scenario, such as the Info Card, which we looked at previously, and the Rich Text.
As we have seen during step three, the Rich Text is responsible for transforming texts into HTML elements, having the big advantage of reading Markdown. This give the component the flexibility to accept various text structures, allowing retailers to build their communication in more direct and clear way.
Configuring the Rich Text
Just as with its functionality, the Rich Text configuration is also simple.
The same way that "Hello, world!" was created, we can create a block implementation example using written text in markdown format. For example:
As previously stated, using Markdown allows for more component flexibility. However, it may also lead to your alteration in your rendering, according to the device used by the user.
For example: the above sentence (
# Your Coffee, Your Way \n ### New Coffee Makers Collection
) can be use a markdown that's suitable for desktop, but not necessarily for mobile as well (whose screen size is smaller).To resolve this scenario and make the behavior more adaptable to other devices, we should use the Responsive Layout.
First, we must declare the blocks in the
store.home
template:"responsive-layout.desktop#desktop", "responsive-layout.mobile#mobile"
Then, we must declare these blocks as follows:
As we interpret the code above, we can notice two Rich Text configurations, built based on
responsive-layout.desktop#desktop
andresponsive-layout.mobile#mobile
.Activity
During this activity, we will play around a little with the Rich Text markdown and learn how to use it with the Image component. All the while using Responsive Layout, of course!
Desktop:
Mobile:
Add the code given above to
home.jsonc
and declare theresponsive-layout
block in thestore.home
template;In
rich-text#mobile
, alter the markdown of the first sentence toh3
and of the second toh4
;Add
image#desktop
as a child ofresponsive-layout.desktop#desktop
. Repeat the process withimage#mobile
andresponsive-layout.mobile#mobile
;Declare the following Image blocks:
When analyzing the Image component props, set the two images' max width to
100%
.:information_source: Remember to access the Responsive Layout documentation if you have any question during your 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.