Using API methods and events

Modified on Thu, 27 Jul 2023 at 12:35 PM

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) => { 

 })