The official API documentation can be found here.


The main entry point to use the API is the FancyProductDesigner class:

var fpd = new FancyProductDesigner($('#designer-wrapper'));

The fpd variable will give you access to all methods and properties of the FancyProductDesigner class.


For example if you want to access the current showing view:

fpd.currentViewInstance

This will return an object of FancyProductDesignerView


Accessing all view instances:

fpd.viewInstances
//returns an array


Methods

In order to use the methods of e.g. the FancyProductDesigner class, you need to wait until the designer is ready to receive these methods. You can not use e.g. the loadProduct method during the loading process when the designer is loading the HTML from the templates.


In order to be sure you can use the methods, please wait until the ready event is executed:

$('#designer-wrapper').on('ready', function() { 
//use api methods in here
fpd.loadProduct(...)

})


Events

The FancyProducDesigner and  FancyProductDesignerView class has numerous events.


Example using events of FancyProducDesigner:

$('#designer-wrapper').on('productCreate', function(evt, currentViews) { 

})

Example using events of FancyProductDesignerView :

$(fpd.currentViewInstance).on('elementAdd', function(evt, fabricObject){
//fabricObject is the new added element
})