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"}}

Configuration

Import the vtex.list app to your theme's peer dependencies in the manifest.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 the responsive-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"