Layouts

Modified on Thu, 17 Oct 2019 at 11:19 AM

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"
      }
    }]
  }
]


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article