Product Definition Examples

You may load different kind of designs - PSD/IDML template, regular static image, blank design or even a state file created by the user or published in a master user folder. Let's consider all these scenarios.

Different types of designs

Importing a PSD Template

Let us assume you have a file named stamp.psd. You should put it into the ..\assets\designs\ folder, which contains all PSD and IDML templates, and use the following JavaScript.

Importing a PSD Template

// An iframe where CustomersCanvas editor should be loaded.
let iframe = document.getElementById("editorFrame");
// Specify the PSD name here (without the extension).
let productTemplate = { surfaces: ['stamp'] };
// Specify the user ID (in our case, masteruser, to make our template public automatically).
let config = { userId: 'masteruser' };
// Load the Design Editor.
CustomersCanvas.IframeApi.loadEditor(
	iframe,
	productTemplate,
	config
);

Importing a multipage IDML Template

Loading IDML files is quite similar to PSD, however, if it is a multipage file, you can avoid listing each surface by using the following code (note, it works only with IDML!).

Importing an IDML Template

// An iframe where CustomersCanvas editor should be loaded.
let iframe = document.getElementById("editorFrame");
// Specify the IDML name here (without the extension).
// You may put it to subfolders.
let productTemplate = { 
    surfaces: { 
        file: 'folder1/my-indesign-template' 
    } 
};
// Load the Design Editor.
CustomersCanvas.IframeApi.loadEditor(
	iframe,
	productTemplate,
	config
);

Loading a Rasterized Image as a Background

If you have an image, you can load it into the editor as a background. The image can be a .png, .jpg, or .jpeg file. For example, to load SummerPhoto.jpg, put it into the ..\assets\designs\ folder and use the following JavaScript.

Loading a Rasterized Image

// Specify the image name here (without an extension).
let backgroundImage  = { surfaces: ['SummerPhoto'] };
// Specify the user ID (in our case, masteruser, to make our template public automatically).
let config = { userId: 'masteruser' };
// Load the Design Editor.
CustomersCanvas.IframeApi.loadEditor(
	iframe,
	backgroundImage,
	config
);

Opening a Blank Product

Now, let us create a template for an 800x600 product from scratch.

Opening a Blank Product

// Specify the empty product size, in points.
let emptyProductDefinition  = { surfaces: [{width: 800, height: 600}] };
// Specify the user ID (in our case, masteruser, to make our template public automatically).
let config = { userId: 'masteruser' };
// Load the Design Editor.
CustomersCanvas.IframeApi.loadEditor(
	iframe,
	emptyProductDefinition,
	config
);

Loading a Template from a State File

To load a state file, you need to specify an identifier of the user who created this state. The Design Editor looks for the state in the state folder of this user.

Loading a State File

let iframe = document.getElementById("editorFrame");
// Specify a state file name to load a product.
let stateId = "ee9293bc-c887-433d-a5bd-454888f07a8a";
// Pass an identifier of the user who created this state, in the editor config.
let config = { userId: 'JohnWood' };
// Load the Design Editor.
CustomersCanvas.IframeApi.loadEditor(
	iframe,
	stateId,
	config
);

When a state file represents a multipage product, you can create a new product by using certain pages from this state file.

Loading a Multipage State File

let productDefinition = {
    // Create a product based on a page from a state file.
    surfaces: [{
        // Specify a state file name.
        stateId: "ee9293bc-c887-433d-a5bd-454888f07a8a",
        // Select the second surface.
        surface: 1
    }]
};
let config = { userId: 'JohnWood' };
CustomersCanvas.IframeApi.loadEditor(
	iframe,
    productDefinition,
    config
);