Welcome to the support center for

Fancy Product Designer & Multistep Product Configurator

Answered

loadProduct does not restore the image scalling

 Dear Support,


I'm using the latest Jquery release of this plugin.

This is a licencied version, but I'm not the official contact for the registered version. I'm just a web developer.


I'm in front off a problem and I don't know where is the issue: I'm trying to restore a customized content through the JSON value but pictures which have been uploaded and resized are not resized when I load the product with loadProduct.

See screenshots.



To initiate Fancy Product Designer, I use the following code source: 

 

jQuery(document).ready(function () {
        var $yourDesigner = $('#designer');
        var customTextParameters = {"z":1,"originX":"left","originY":"top","opacity":1,"scale":1,"color":true,"removable":true,"resizable":true,"draggable":true,"rotatable":true,"zChangeable":true};
        customTextParameters.font = fonts[0]; // set as default font the first font used in the FPD
        customTextParameters.autoCenter = true;

        pluginOpts = {
            editorMode: false,
            fonts: fonts,
            stageHeight: 800,
            stageWidth: 1200,
            mainBarModules: ['images', 'text'],
            actions:  {
                        'top': ['zoom', 'reset-product', 'undo','redo', 'manage-layers'],
                        'right': [],
                        'bottom': [],
                        'left': []
                },
            imageParameters: {"z":1,"x":0,"y":0,"zChangeable":false,"originX":"left","originY":"top","scale":1, "removable":false,"draggable":false,"resizable":false,"rotatable":false},
            customTextParameters: customTextParameters,
            customImageParameters: {"colors":false,"zChangeable":true,"removable":true,"draggable":true,"resizable":true,"rotatable":false,"autoCenter":true},
            zoom: 1,
            maxZoom: 10,
            templatesDirectory: '/templates/'
        };
        yourDesigner = new FancyProductDesigner($yourDesigner, pluginOpts);
        $('#designer').on('ready',function(evt,fabricImage) {
            resize();
        });
    });

 

 After uploading a picture and after resize it, I fetch the JSON content and save it into a database for further usage with the following code:

 

var json = yourDesigner.getProduct();
// save content of the json variable in a database here

A debug output of the JSON content saved in database is something like that:

[0] => stdClass Object
                (
                    [title] => Page 1
                    [thumbnail] => https://www.foo.com/johndoe.png
                    [elements] => Array
                        (
                            [0] => stdClass Object
                                (
                                    [title] => Image test.png
                                    [source] => https://www.foo.com/imageresized.png
                                    [parameters] => stdClass Object
                                        (
                                            [angle] => 0
                                            [autoCenter] => 
                                            [autoSelect] => 
                                            [availableFilters] => Array
                                                (
                                                )

                                            [boundingBox] => Base
                                            [boundingBoxMode] => inside
                                            [colorLinkGroup] => 
                                            [colorPrices] => stdClass Object
                                                (
                                                )

                                            [colors] => 
                                            [copyable] => 
                                            [cornerSize] => 24
                                            [draggable] => 1
                                            [evented] => 1
                                            [fill] => 
                                            [filter] => 
                                            [flipX] => 
                                            [flipY] => 
                                            [isEditable] => 1
                                            [left] => 407.45424787978
                                            [lockUniScaling] => 1
                                            [opacity] => 1
                                            [originX] => left
                                            [originY] => top
                                            [padding] => 0
                                            [price] => 0
                                            [removable] => 1
                                            [replace] => 
                                            [replaceInAllViews] => 
                                            [resizable] => 1
                                            [rotatable] => 
                                            [scale] => 1
                                            [scaleX] => 0.1655259633983
                                            [scaleY] => 0.1655259633983
                                            [top] => 402.12022020533
                                            [topped] => 
                                            [uniScalingUnlockable] => 
                                            [uploadZone] => 
                                            [uploadZoneScaleMode] => fit
                                            [x] => 400
                                            [y] => 300
                                            [z] => 1
                                            [zChangeable] => 1
                                        )

                                    [type] => image
                                )
}

 

After saving this content in database I'm trying to reuse it.

A debug from the server side of the JSON content used to rebuild the interface display something like that:

[0] => stdClass Object
                (
                    [title] => Page 1
                    [thumbnail] => https://www.foo.com/johndoe.png
                    [elements] => Array
                        (
                            [0] => stdClass Object
                                (
                                    [title] => Image test.png
                                    [source] => https://www.foo.com/imageresized.png
                                    [parameters] => stdClass Object
                                        (
                                            [angle] => 0
                                            [autoCenter] => 
                                            [autoSelect] => 
                                            [availableFilters] => Array
                                                (
                                                )

                                            [boundingBox] => Base
                                            [boundingBoxMode] => inside
                                            [colorLinkGroup] => 
                                            [colorPrices] => stdClass Object
                                                (
                                                )

                                            [colors] => 
                                            [copyable] => 
                                            [cornerSize] => 24
                                            [draggable] => 1
                                            [evented] => 1
                                            [fill] => 
                                            [filter] => 
                                            [flipX] => 
                                            [flipY] => 
                                            [isEditable] => 1
                                            [left] => 407.45424787978
                                            [lockUniScaling] => 1
                                            [opacity] => 1
                                            [originX] => left
                                            [originY] => top
                                            [padding] => 0
                                            [price] => 0
                                            [removable] => 1
                                            [replace] => 
                                            [replaceInAllViews] => 
                                            [resizable] => 1
                                            [rotatable] => 
                                            [scale] => 1
                                            [scaleX] => 0.1655259633983
                                            [scaleY] => 0.1655259633983
                                            [top] => 402.12022020533
                                            [topped] => 
                                            [uniScalingUnlockable] => 
                                            [uploadZone] => 
                                            [uploadZoneScaleMode] => fit
                                            [x] => 400
                                            [y] => 300
                                            [z] => 1
                                            [zChangeable] => 1
                                        )

                                    [type] => image
                                )
}

 

As you can see, the properties ScaleX and ScaleY exists in the element picture.


Javascript code used to rebuild the interface is the following one:

var json = Json.parse('<?php echo $this->getJson();?>');
$('#designer').on('ready',function(evt) {
    yourDesigner.loadProduct(json);
});

 

But after Fancy Product Designer has been loaded, the image is displayed in its original size, not the resized one. Why the scale properties are not taken into account?


Any help will be appreciate.

 

Regards

 


Answer

Sorry, please open a ticket for this issue.

i am curious as to the status of this one. Can I follow the ticket mentioned?

That is not possible, no sorry.


Comments to this discussion are now closed!