> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://staging.chrisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Using API methods and events

The official API documentation can be found [here](https://jquerydoc.fancyproductdesigner.com/).

The main entry point to use the API is the [FancyProductDesigner](https://jsdoc.fancyproductdesigner.com/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](https://jsdoc.fancyproductdesigner.com/FancyProductDesigner).

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

```
fpd.currentViewInstance
```

This will return an object of [FancyProductDesignerView](https://jsdoc.fancyproductdesigner.com/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](https://jsdoc.fancyproductdesigner.com/FancyProductDesignerView) class has numerous events.

Example using events of [FancyProducDesigner](https://jsdoc.fancyproductdesigner.com/FancyProductDesigner):

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