Skip to main content

Getting Started

First of all add the necessary JS and CSS files to your web page.

<link rel="stylesheet" type="text/css" href="css/FancyProductDesigner.min.css" />
<script src="js/fabric-5.3.1.min.js" type="text/javascript"></script>
<script src="js/FancyProductDesigner.min.js" type="text/javascript"></script>

Create a container element for the product designer anywhere in your page.

<div id="fpd-target" class="fpd-sidebar fpd-shadow-2"></div>

In the class attribute you can also define the initial layout (See demos folder).

Now initialize an instance of FancyProductDesigner on that container element.


const appOptions = {};

const fpd = new FancyProductDesigner(
    document.getElementById('fpd-target'), 
    appOptions
);

You can find all app options here.

API​

Methods​

fpd.getOrder(); //https://jsdoc.fancyproductdesigner.com/FancyProductDesigner#getOrder

//access current view instance
fpd.currentViewInstance.toDataURL() // export the current selected view as data URI

Events​

fpd.addEventListener('ready', () => {
    //wait for this event in order to make any api method call
})