Calculating price based on a print area

3 minutes to read

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 a product area. So, if you make customizable vinyl products, you cannot continue without knowing how to measure products, which this topic dwells on.

In Design Editor, 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 layers, 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 you can measure this vinyl nameplate.

Getting Overall Measurements of a Product After Customization Is Done

When the product customization is finished, the Editor.finishProductDesign method should be used to save and render the product. This method returns an object implementing the IFinishDesignResult interface, where IFinishDesignResult.boundsData contains bounding rectangles that cover all the product layers on all product surfaces. The following snippet gets the data and outputs it to the console.

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

The output of the previous example looks as follows:

{
    "surfaces": [
        {
            "left": 104.8,
            "top": 80.8,
            "width": 875.0656,
            "height": 339.2
        }
    ],
    "currentSurface": {
        "left": 104.8,
        "top": 80.8,
        "width": 875.0656,
        "height": 339.2,
        "id": "0.6832277879441475"
    }
}

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

Left - the x-coordinate of the bounding rectangle's top-left corner relative to the print area.
Top - the y-coordinate of the bounding rectangle's top-left corner relative to the print area.
Width - the width of the bounding rectangle.
Height - the 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 for all product surfaces 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 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/Generated/IframeApi.js">
    </script>
</head>
<body>
    <!-- The iframe to display the editor in. -->
    <iframe id="editorFrame" width="100%" height="800px"></iframe>
</body>

<script>
// Defining the product.
productDefinition = { surfaces: [ "Nameplate" ] };
// Getting the iframe element to display the editor in.
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:

{
    "selectedGroup": {
        "items": [
            "Logo",
            "Position",
            "Name"
        ],
        "groupBounds": {
            "left": 104.8,
            "top": 80.8,
            "width": 875.065,
            "height": 339.2,
            "id": "0.8969080301659322"
        }
    },
    "overallBounds": {
        "left": 104.8,
        "top": 80.8,
        "width": 875.065,
        "height": 339.2,
        "id": "0.7194027171427386"
    },
    "bounds": [
        {
            "name": "surface_0",
            "id": "f67f1682-fc3c-4756-b15e-a1dc3fe6cc4d",
            "bounds": {
                "left": 104.8,
                "top": 80.8,
                "width": 875.065,
                "height": 339.2,
                "id": "0.9480328356182064"
            }
        }
    ]
}

Here, selectedGroup contains the layers currently selected in the editor, overallBounds combines all the layers on the current surface, and bounds include product measurements for all product surfaces. The measurements are made in the same way as we discussed the overall measurements. Also, you can calculate the area of both the bounding rectangles in square inches using the same formula.

Calculating price based on a print area

Getting Overall Measurements of a Product After Customization Is Done

Getting Product Measurements During Customization

Was this page helpful?