@aurigma/ui-framework/docs/widgets/design-editor-commands/change-mockup.md

A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.

Command: changeMockup
=====================

Changes mockup images in the editor. It is a full equivalent to [product.setMockups](https://customerscanvas.com/docs/cc/customerscanvas.iframeapi.objectmodel.product.setmockups.htm) from the IFrame API. 

If you want to use a dynamically generated image as a mockup, use the [**setRemoteMockup** command](set-remote-mockup.md) 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](https://customerscanvas.com/docs/cc/customerscanvas.iframeapi.objectmodel.product.setmockups.htm).

## 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.

``` json
{
    "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}}" 
            }]
        }
    }
}
```