changeMockup

Changes mockup images in the editor. It is a full equivalent to product.setMockups from the 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 the 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. as passed to product.setMockups.

For the complete list of parameters, you can refer to IDesignEditorDefinitionChangeMockup.

Example

Typically, you need to change the mockup based on a product 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. Now, when a user chooses a different value of an option, we know which 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": "design-editor", 
    "name": "design-editor",
    "params": {
        "initial": { ... }, 
        "changeMockup": {
            "data": [{
                 "mockup": {
                     "down": "{{$['color']._.props.mockup}}"
                 },
                 "previewMockups": "{{$['color']._.props.previews}}" 
            }]
        }
    }
}