Configuring Your First Print Product

The Understanding Print Products topic overviews the capabilities of Customer's Canvas, here let us discuss some basic examples.

Web Page Sample

As said in the Integration with E-commerce Overview topic, to build Customer's Canvas into your system you should add the IFrame API script and an iframe tag to a design page, and load the web-to-print editor into the iframe. Let us assume that your Customer's Canvas shares a domain name with the main website and is located in the /cc/ virtual folder. Here is the simplest page that displays the web-to-print editor and loads a business card template into the editor:

HTML
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Customer's Canvas Quick Start Sample Page</title>
    <!-- The IFrame API script. IMPORTANT! Do not remove or change the id. -->
    <script id="CcIframeApiScript" type="text/javascript" src="/cc/Resources/SPEditor/Scripts/IFrame/IframeApi.js">
    </script>
</head>

<body>
    <!-- The iframe to display the editor into. -->
    <iframe id="editorFrame" width="100%" height="800px"></iframe>
</body>

<script>
    //Initializing product with only one template - "BusinessCard.psd".
    productDefinition = { surfaces: ["BusinessCard"] };
    //Getting the iframe element to display the editor into.
    var iframe = document.getElementById("editorFrame");
    var editor = null;
    //Loading the editor.
    CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
        //If the editor has been successfully loaded.
        .then(function (e) {
        editor = e;
    })
        //If there was an error thrown when loading the editor.
        .catch(function (error) {
        console.error("The editor failed to load with an exception: ", error);
    });

</script>

</html>

When the design page is loaded, it will display the \ProductTemplates\Designs\businesscard.psd file in the editor:

A single page design example.

Multipage Products

You can add to the product as many surfaces (pages) as you like. The IProductDefinition interface defines product surfaces as an array. For example, specify design templates for two surfaces of a double-sided business card:

JavaScript
productDefinition = { surfaces: ["BusinessCard2_side1", "BusinessCard2_side2"] };

A double page design example.

For multipage products having all its page templates stored in a folder use the ISurfacesFromFolder interface:

JavaScript
productDefinition = {surfaces: { designFolder: "photoBook" } };

For more information see the Multipage Products topic.

If you organize designs in subfolders, add a relative path to a template file name. For example, if you have a separate folder called \businesscards\ for business card templates, the product definition may look as follows:

JavaScript
productDefinition = { surfaces: ["businesscards\\modern"] };

Mockups

To let you have more realistic product design, the web-to-print editor allows you for adding additional elements which improve the product preview, but are not printed in hi-res outputs. Mockups are such kind of elements. If you have mockups, you can specify them by defining the ISurfaceTemplate.mockup property:

JavaScript
productDefinition = { 
    surfaces: [
        {printAreas: [{designFile: "envelopeDesign"}], mockup: {down: "envelopeMockup"} }
    ] 
};

or set the ISurfacesFromFolder.mockupFolder property to specify folder containing mockups:

JavaScript
productDefinition = {surfaces: { designFolder: "photoBook", mockupFolder: "pageMockups" } };

Mockups may also be organized into subfolders, like design templates.

See Also

Manual

IFrame API Reference