Product Modal
The modal-select-product
block displays a modal with detailed information (such as size and color) about the product the costumer wants to add to the lists they own.
![{"base64":" ","img":{"width":905,"height":533,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":8364893,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-list-productmodal-0.gif"}}](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-list-productmodal-0.gif)
Configuration
- Import the
vtex.list
app to your theme's peer dependencies in themanifest.json
file as in the following example:
_10 "peerDependencies": {_10 "vtex.list": "3.x"_10 }
- Add the
modal-select-product
block to other theme block, such as theresponsive-layout.desktop
. For example:
_10 "responsive-layout.desktop": {_10 "children": [_10+ "modal-select-product",_10 ]_10 }
Customization
Prop Name | Type | Description | Default Value |
---|---|---|---|
nameButton | string | Changes the name of the button that opens the modal | "Button name" |