The Layouts module is similar to the Products module, but instead of changing the whole product (all views), it allows to change a single view inside of the displaying product. You can set up your layouts inside the plugin options with the layouts option. The layouts option receives an array containing objects representing a view.
Example of layouts option:
layouts: [
{
title: 'My View Layout',
thumbnail: 'images/layout_thumbnail.jpg',
elements: [
{
"type": "image",
"source": "images/large_v.jpg",
"title": "Large Image",
"parameters": {
"price": 50.05,
"left": 150,
"top": 300,
"scaleX": 0.1,
"scaleY": 0.1,
"autoCenter": false,
"zChangeable": true,
"removable": false,
"draggable": true,
"rotatable": true,
"resizable": true,
"copyable": true,
"autoSelect": false,
"uniScalingUnlockable": true,
"flipX": false,
"originX": "left",
"originY": "top",
"advancedEditing": true,
"colors": "#000"
}
},
{
"type": "text",
"source": "Last\nName",
"title": "Enter your last name",
"parameters": {
"zChangeable": true,
"removable": true,
"draggable": true,
"rotatable": true,
"resizable": true,
"colors": "#ffffff",
"fontSize": 30,
"minFontSize": 5,
"maxFontSize": 100,
"patternable": true,
"fontStyle": "normal",
"fontWeight": "bold",
"lineHeight": 1.5,
"letterSpacing": 1,
"textAlign": "left",
"fill": "#990000",
"editable": true,
"left": 200,
"fontFamily": "Lobster",
"top": 500,
"maxLines": 1,
"textPlaceholder": true
}
}]
},
{
title: 'My Second Layout',
thumbnail: 'images/layout_thumbnail.jpg',
elements: [
{
"type": "image",
"source": "images/large_v.jpg",
"title": "Whie Text",
"parameters": {
"left": 150,
"top": 300,
"scaleX": 0.1,
"scaleY": 0.1,
"autoCenter": false,
"zChangeable": true,
"removable": false,
"draggable": true,
"rotatable": true,
"resizable": true,
"copyable": true,
"autoSelect": false,
"uniScalingUnlockable": true,
"flipX": false,
"originX": "left",
"originY": "top",
"advancedEditing": true,
"colors": "#000"
}
}]
},
{
title: 'My Third Layout',
thumbnail: 'images/large_v.jpg',
elements: [
{
"type": "image",
"source": "images/large_v.jpg",
"title": "Whie Text",
"parameters": {
"left": 150,
"top": 300,
"scaleX": 0.1,
"scaleY": 0.1,
"autoCenter": false,
"zChangeable": true,
"removable": false,
"draggable": true,
"rotatable": true,
"resizable": true,
"copyable": true,
"autoSelect": false,
"uniScalingUnlockable": true,
"flipX": false,
"originX": "left",
"originY": "top",
"advancedEditing": true,
"colors": "#000"
}
}]
}
]