Integration with E-commerce Overview

Customer's Canvas is an ASP.NET application that is ready to be integrated with any e-commerce system, no matter what you are using. Customer's Canvas can take care of the following tasks with ease:

  • Importing templates from PSD files (in Photoshop format)
  • Providing user interface for creating personalized products
  • Allowing the adding of images from public and user-created image collections
  • Rendering user-created products into proof images and print-ready output
  • Saving user-created products into the file system to edit them in the future
  • Generating links to rendered files: proof images and hi-res output

The starting point of any Customer's Canvas integration is to establish the hosting model for Customer's Canvas. There are three ways to do this:

  • On the same server as the e-commerce system Customer's Canvas is integrated with
  • On any other ASP.NET hosting server
  • Getting the hosted version of Customer's Canvas

To get more information on Customer's Canvas hosting see the Deploying Customer's Canvas to Windows Server topic.

After successfully hosting Customer's Canvas, it can be easily integrated into an e-commerce system. To better understand how Customer's Canvas and the system are connected and what tasks are solved by each side, take a look at the following diagram illustrating a common ordering workflow on a typical web-to-print site:

Usual ordering process diagram.

The workflow is colored here to clearly indicate where each step is implemented: steps I, IV, V are implemented by the e-commerce system, while step II is completely conducted by Customer's Canvas. Step III is shared. The important thing to keep in mind here is that all the navigation between the steps should be implemented by the e-commerce system; it is responsible for all the transfers from one step the next. Let us take a more in-depth look at each step below.

(I), System: on the first step, the system has to provide a user interface to select a template or load a previously saved design.

Selecting product template.

(II), Customer's Canvas: on the second step, a user can edit the design. This is where Customer's Canvas comes in. At the beginning of this step, the system sets the following data: product template or user design, editing parameters, user information, and, optionally, metadata the system may need to link with the order.

Editing product template.

The front end of Customer's Canvas is the web-to-print editor, like the one shown above. You build the editor into your system's design page by adding IFrame API script to the page and loading the editor into the iframe tag. For reference, the iframe is an HTML container designed to allow the embedding of externally hosted content into a web page. Take a look at the following example:

HTML
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Simplest Design Page</title>
    <!-- The IFrame API script. IMPORTANT! Do not remove or change the id. -->
    <script id="CcIframeApiScript" type="text/javascript" src="http://example.com/CustomersCanvas/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>

Please notice that all the print templates and images (including both the public graphics library and user uploaded images) should be placed into the Customer's Canvas file system before the product is opened in the editor. For more information see the Configuring Products and Photoshop Templates topics.

(III), System and Customer's Canvas: to proceed to the third step the user should tell the system that editing is finished by clicking the corresponding button (submit, finish, next, etc.) The system transfers this signal to Customer's Canvas using its IFrame API (see the Integration With E-commerce topic). By receiving the signal, Customer's Canvas processes the product and delivers print-ready content and additional metadata to the host website. The way this takes place is: the website triggers a special method in Customer's Canvas and passes a reference to a callback function in there. Customer's Canvas processes the personalized product, then triggers the callback function and returns the following data into it: rendering status, links to ready-to-print output and proof images, a link for further editing the product, etc. The described interconnection between Customer's Canvas and the system is illustrated on the following diagram:

The interconnection between Customer's Canvas and the system after the product editing is finished.

After this interconnection is finished, the system displays the approval page containing proof images; presented as the third step on the initial workflow diagram above. Here a user accepts the design or comes back to the editing step.

Approval page.

For test purposes, you can omit the approval page and just use the default Download button. This way you can simply download the print-ready output on the client side. Though in the real system this button should be disabled in the editor configuration:

JavaScript
<script>
    ...
    productDefinition = { surfaces: ["BusinessCard"] };
    //Getting the iframe element to display the editor into.
    var iframe = document.getElementById("editorFrame");
    ...
    //Defining the editor configuration.
    configuration = { widgets: {FinishButton: {mode: "Disabled"}} };
    //Loading the editor with the given configuration.
    CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration).then(function(e) {editor = e});
    ...
</script>

And do not forget to make your own navigation to approval page.

(IV, V), System: the last two steps are conducted by the system, without the participation of Customer's Canvas. Here the system uses data received from Customer's Canvas on the third step, to create the order within the system and associate the resulting print-ready output with it, to link user-created products with their profile to enable editing in the future, or to make a repeat order by using the existing print-ready output.

See Also

Manual