Product Definition Examples

• 3 minutes to read

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.

// 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!).

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

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

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

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.

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
);