Measuring Products

Normally, in web-to-print solutions, product prices are calculated based on the paper type and size, number of outputs, etc., and do not depend on the precise design size. However, there is a relatively new but very popular product type - vinyl stickers - where pricing is mainly based on product area. So, if you make customizable vinyl stickers, you cannot continue without knowing how to measure products, which this topic dwells on.

In Customer's Canvas, you can get measurements of bounding rectangles both for all the layers in a product or for currently selected layers only. The first one, covering all product layers, allows for calculating the total price both when the product is being personalized and after the personalization is finished. And the latter one, dealing with only currently selected layer(s), allows for calculating their price when being personalized by a user.

Bounding rectangles for selected layers and all layers of the product.

Let us see how this works.

Getting Overall Measurements of a Product After Customization Is Done

When the product customization is finished, the Editor.finishProductDesign method should be used. It returns an object implementing the IFinishDesignResult interface, where IFinishDesignResult.boundsData provides the bounding rectangle that covers all the product layers. The following snippet gets the data and outputs it to the console:

JavaScript
editor.finishProductDesign()
    .then(function (result) {
        console.log(JSON.stringify(result.boundsData, null, 4));
    });

The output of the previous snippet looks as follows:

JavaScript
{
    "currentSurface": {
        "Left": 153.722229,
        "Top": 70.10128,
        "Width": 71.818726,
        "Height": 67.31922
    }
}

We presume that any vinyl sticker product has only one surface. So, currentSurface acts as the only surface of the product, and it includes all the product layers. currentSurface provides the following measurements:

  • Left - X-coordinate of the bounding rectangle's top-left corner.
  • Top - Y-coordinate of the bounding rectangle's top-left corner.
  • Width - Width of the bounding rectangle.
  • Height - Height of the bounding rectangle.

All the measurements are made in points. So, if you want to get the area of the bounding rectangle in square inches, use the following formula:

S = (width x height) / 5184

Getting Product Measurements During Customization

When personalizing the product, it is possible to get measurements of the bounding rectangles using the BoundsNotification event. This event is sent on:

  • product load
  • layer selection
  • layer size change
  • layer position change

The following snippet subscribes to the BoundsNotification event and outputs the event arguments to the console:

HTML
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <!-- 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>
//Defining product.
productDefinition = { surfaces: [ "BusinessCard2_side1" ] };
//Getting the iframe element to display the editor into.
var iframe = document.getElementById("editorFrame");
//Loading the editor.
var editor = null;
CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
    .then(function(e) {
        editor = e;
        editor.subscribe(CustomersCanvas.IframeApi.PostMessage.Events.BoundsNotification, 
            function(args) 
            { 
                console.log("BoundsNotification fired."); 
                console.log(JSON.stringify(args, null, 4)); 
            })
    });
</script>
</html>

The output of the previous snippet looks as follows:

HTML
{
    "selectedGroup": {
        "items": [
            "Name",
            "JobPosition"
        ],
        "groupBounds": {
            "Left": 154.071533,
            "Top": 70.10128,
            "Width": 46.125382,
            "Height": 18.791039999999995
        }
    },
    "overallBounds": {
        "Left": 153.722229,
        "Top": 70.10128,
        "Width": 71.818726,
        "Height": 67.31922
    }
}

Here, selectedGroup contains layers currently selected by the user in the editor and overallBounds includes all product layers. The measurements are made in the same way as we discussed above. Also, you can calculate the area of both of the bounding rectangles in square inches using the same formula.

See Also

Manual

IFrame API Reference