The official API documentation can be found here.
The main entry point to use the API is the FancyProductDesigner class:
var fpd = new FancyProductDesigner(document.getElementById('fpd-target'));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:
fpd.addEventListener('ready',() => {
//use api methods in here
fpd.loadProduct(...)
})Events
The FancyProducDesigner and FancyProductDesignerView class has numerous events.
Example using events of FancyProducDesigner:
fpd.addEventListener('productCreate',(evt) => {
})