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 as setMockups from IFrame API with the only exception - there is no need to refer to a surface. 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 to setMockups. 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}}" 
            }]
        }
     }
}