changeMockup

• 1 minute to read

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.
• options - additional parameters to control the undo/redo feature, 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}}" 
            }]
        }
    }
}