Modal Layout
Modal layout
Introduction
It is also possible, with the Store Framework, to create a modals experience in the store. Whether to subscribe to a newsletter or create a quick view, Modal Layout works like all other layout blocks, in which any block can be used as its content.
In this step, we will then build a simpler modal, and then build a functional Quick View.
A little more about how Modal Layout works
The Modal Layout block divides its logic into two sub-blocks: modal-trigger
andmodal-layout
.
The modal-trigger is used to choose which block should be responsible for triggering the modal behavior, you could use an image, text, link or the block you prefer.
The modal-layout defines which child blocks will be used within the modal. It is, therefore, in this block that the content of the modal itself must be placed.
Activity
- At your home, add a
modal-trigger # first
to the blocks:
{
"store.home": {
"blocks": [
...
"modal-trigger#first"
]
}
}
- Then define the
modal-trigger#first
with a text from Click Me:
{
...
"modal-trigger#first": {
"children": [
"rich-text#trigger"
]
},
"rich-text#trigger": {
"props": {
"text": "CLICK ME"
}
}
}
- Put the
modal-layout#first
as children of themodal-trigger#first
:
{
...
"modal-trigger#first": {
"children": [
"rich-text#trigger",
+ "modal-layout#first"
]
},
...
+ "modal-layout#first": {
+ "children": [
+ "rich-text#hello"
+ ]
+ },
+ "rich-text#hello": {
+ "props": {
+ "text": "Hello"
+ }
+ }
...
}
The result, then, should be:
Any questions?
See the answersheet for this step or join us on our office hours
Help us make this content better!
VTEX IO courses are open source. If you see something wrong, you can open a pull request!
Make a contributionUpdated about 1 year ago