Welcome to the support center for

Fancy Product Designer & Multistep Product Configurator


Size of all elements

I would like to get a size of the hole designed set. So my customers can actually see what height and length they are going to order.

It would be way more easier to calculare a price with real sizes of the designed product (in my case, plotter film), also you can calculate the area, and get a 100% safe price for their designed products. It would be awesome, if you also can set up pricing rules for specific area sizes.



Since I was tired of waiting for a reply. I coded it by myself. 

Open assets/js/FancyProductDesigner.js (run in debug mode)

 Call a function in this.addView.on("elementAdd"), .on('elementSelect'), .on('elementChange'), .on('elementModify'),  .on('elementRemove')

do your stuff you need in that function and than call: 

var allElements = new Array();

function calcPriceBox(){
        var TL = {x:9999, y:9999}; //not fancy, but works
        var LR = {x:0, y:0};

            TL.x = TL.x < e.oCoords.tl.x ? TL.x : e.oCoords.tl.x;
            TL.y = TL.y < e.oCoords.tl.y ? TL.y : e.oCoords.tl.y;
            TL.x = TL.x < e.oCoords.tr.x ? TL.x : e.oCoords.tr.x;
            TL.y = TL.y < e.oCoords.tr.y ? TL.y : e.oCoords.tr.y;
            TL.x = TL.x < e.oCoords.br.x ? TL.x : e.oCoords.br.x;
            TL.y = TL.y < e.oCoords.br.y ? TL.y : e.oCoords.br.y;
            TL.x = TL.x < e.oCoords.bl.x ? TL.x : e.oCoords.bl.x;
            TL.y = TL.y < e.oCoords.bl.y ? TL.y : e.oCoords.bl.y;
            LR.x = LR.x > e.oCoords.tl.x ? LR.x : e.oCoords.tl.x;
            LR.y = LR.y > e.oCoords.tl.y ? LR.y : e.oCoords.tl.y;
            LR.x = LR.x > e.oCoords.tr.x ? LR.x : e.oCoords.tr.x;
            LR.y = LR.y > e.oCoords.tr.y ? LR.y : e.oCoords.tr.y;
            LR.x = LR.x > e.oCoords.br.x ? LR.x : e.oCoords.br.x;
            LR.y = LR.y > e.oCoords.br.y ? LR.y : e.oCoords.br.y;
            LR.x = LR.x > e.oCoords.bl.x ? LR.x : e.oCoords.bl.x;
            LR.y = LR.y > e.oCoords.bl.y ? LR.y : e.oCoords.bl.y;
        var foilbox = {width:0, height:0, aspect:0} 
        //get this box that contains every element
        foilbox.width = LR.x - TL.x;
        foilbox.height = LR.y - TL.y;
        foilbox.aspect = foilbox.width / foilbox.height;
        return foilbox;

  with this function you will get box (in pixels) I made in the post before with my awesome drawing skills.

Of course you need to add every element in an array you can access... I made it dirty and made my own.. IDGAS..

if(action === "elementAdd")
        else if(action === "elementRemove"){
            allElements.splice(myFuckingElements.indexOf(element), 1);


I use it like this: (shortened)


 if(allElements.length > 0){
            var priceBox = calcPriceBox();
            foilSize.width = $(".decal .size .length").val(); //real length of the ding you design e.g. 20cm (val: 20)
            foilSize.height = round(foilSize.width / priceBox.aspect,2); //calc the real height of it
            var area = foilSize.width * foilSize.height;
            //calculate a price. maybe with the area, maybe with a crazy mathematical workarounds
return price;


Login or Signup to post a comment