Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting the file :white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :x: You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values. :white_check_mark: Rich-text Desktop props must be correclty declared :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::x::white_check_mark:
:white_check_mark: Getting the file :white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :x: You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values. :white_check_mark: Rich-text Desktop props must be correclty declared :x: You haven't declared the props alt,link,maxWidth,src from image#mobile correctly. Review their names and values. :white_check_mark: Image Desktop props must be correclty declared
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting the file :white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :x: You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values. :white_check_mark: Rich-text Desktop props must be correclty declared :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared
:white_check_mark::x::x::x::x::x::x::x::x:
:white_check_mark: Getting the file
:x: There's something wrong with the format of your home.jsonc
file
:x: You havent declared responsive-layout.desktop#desktop,responsive-layout.mobile#mobile on you store.home
:x: You haven't stated rich-text#desktop and image#desktop correctly inside responsive-layout.desktop#desktop. Review their names, positioning and parent block.
:x: You haven't stated rich-text#mobile and image#mobile correctly inside responsive-layout.mobile#mobile. Review their names, positioning and parent block.
:x: You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values.
:x: You haven't declared the props text,textPosition,textAlignment from rich-text#desktop correctly. Review their names and values.
:x: You haven't declared the props alt,link,maxWidth,src from image#mobile correctly. Review their names and values.
:x: You haven't declared the props src,link,alt,maxWidth from image#desktop correctly. Review their names and values.
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting the file :white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :x: You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values. :white_check_mark: Rich-text Desktop props must be correclty declared :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared
: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: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :white_check_mark: Rich-text Mobile props must be correclty declared :white_check_mark: Rich-text Desktop props must be correclty declared :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared
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.