Using API methods and events

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'));

JavaScript

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

JavaScript

This will return an object of FancyProductDesignerView

Accessing all view instances:

fpd.viewInstances
//returns an array

JavaScript

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(...)

})

JavaScript

Events

The FancyProducDesigner and  FancyProductDesignerView class has numerous events.

Example using events of FancyProducDesigner:

fpd.addEventListener('productCreate',(evt) => {

})

JavaScript

Updated on: 06/08/2025