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 # firstto the blocks:
_10{_10 "store.home": {_10 "blocks": [_10 ..._10 "modal-trigger#first"_10 ]_10 }_10}
- Then define the
modal-trigger#firstwith a text from Click Me:
_13{_13 ..._13 "modal-trigger#first": {_13 "children": [_13 "rich-text#trigger"_13 ]_13 },_13 "rich-text#trigger": {_13 "props": {_13 "text": "CLICK ME"_13 }_13 }_13}
- Put the
modal-layout#firstas children of themodal-trigger#first:
_21{_21 ..._21 "modal-trigger#first": {_21 "children": [_21 "rich-text#trigger",_21+ "modal-layout#first"_21 ]_21 },_21 ..._21+ "modal-layout#first": {_21+ "children": [_21+ "rich-text#hello"_21+ ]_21+ },_21+ "rich-text#hello": {_21+ "props": {_21+ "text": "Hello"_21+ }_21+ }_21 ..._21}
The result, then, should be:
