Canvas Commands
Command: changeMockup
Changes mockup images in the editor. It is a full equivalent to product.setMockups from IFrame API.
If you want to use a dynamically generated image as a mockup, use the setRemoteMockup command instead.
Params
data
- an array with mockup descriptions in the same syntax assetMockups
from IFrame API with the only exception - there is no need to refer to asurface
. For the multi-surface products, it is supposed that the order of elements of this array corresponds to the order of the surfaces.options
- additional parameters to control the undo/redo, as passed tosetMockups
. See appropriate docs for details.
Example
Typically, you need to change the mockup based on an option value.
Here we create an array with the information on how to bind a mockup with the option values in the vars
section (which is easy to generate using JavaScript before you load the editor). After that, we use the dynamic {{#each}}
construction to generate the option definition and now when a user chooses a different value of an option, we know what mockup to load in Customer's Canvas.
{
"vars": {
"caseColors": [
{
"title": "Black Space",
"editorMockup": "cases/black",
"previewMockups": [ "cases/3d-black", "cases/3-4-black"]
},
{
"title": "Snow Queen",
"editorMockup": "cases/white",
"previewMockups": [ "cases/3d-white", "cases/3-4-white"]
},
{
"title": "Wet Asphalt",
"editorMockup": "cases/gray",
"previewMockups": [ "cases/3d-gray", "cases/3-4-gray"]
}
]
}
}
{
"type": "option",
"name": "color",
"params": {
"title": "Case color",
"type": "radio",
"values": {
"{{#each vars.caseColors as item}}": {
"title": "{{item.title}}",
"props": {
"mockup": "{{item.editorMockup}}",
"previews": "{{item.previewMockups}}"
},
"preselected": "{{index == 0}}"
}
}
}
},
...
{
"type": "canvas",
"name": "cc",
"params": {
"initial": { ... },
"changeMockup": {
"data": [{
"mockup": {
"down": "{{$['color']._.props.mockup}}"
},
"previewMockups": "{{$['color']._.props.previews}}"
}]
}
}
}