FancyProductDesigner Class

This is the main entry point to access FPD via the API. FancyProductDesigner class contains the instances of FancyProductDesignerView class.

Example
Best practice to use the API is to wait for the ready event, then the UI and all products/designs has been set (not loaded).
var fpd = new FancyProductDesigner($fpd, options);
$fpd.on('ready', function() { //use api methods in here })

Constructor

FancyProductDesigner
(
  • elem
  • opts
)

Parameters:

  • elem HTMLElement | jQuery
    • A HTML element with an unique ID.
  • [opts] Object optional
Show:

Methods

Properties

Events

addCustomImage
(
  • source
  • title
  • options
)

Adds a new custom image to the product stage. This method should be used if you are using an own image uploader for the product designer. The customImageParameters option will be applied on the images that are added via this method.

Parameters:

  • source String

    The URL of the image.

  • title String

    The title for the design.

  • options Object

    Additional options.

addElement
(
  • type
  • source
  • title
  • parameters={}
  • viewIndex
)

Adds a new element to the product designer.

Parameters:

  • type String

    The type of an element you would like to add, 'image' or 'text'.

  • source String

    For image the URL to the image and for text elements the default text.

  • title String

    Only required for image elements.

  • [parameters={}] Object optional

    An object with the parameters, you would like to apply on the element.

  • [viewIndex] Number optional

    The index of the view where the element needs to be added to. If no index is set, it will be added to current showing view.

addProduct
(
  • views
  • category
)

Adds a new product to the product designer.

Parameters:

  • views Array

    An array containing the views for a product. A view is an object with a title, thumbnail and elements property. The elements property is an array containing one or more objects with source, title, parameters and type.

  • [category] String optional

    If categories are used, you need to define the category title.

addView
(
  • view
)

Adds a view to the current visible product.

Parameters:

  • view Object

    An object with title, thumbnail and elements properties.

calculatePrice
(
  • considerQuantity=true
)
Number

Calculates the total price considering the elements price in all views and pricing rules.

Parameters:

  • [considerQuantity=true] Boolean optional

    Calculate with or without quantity.

Returns:

Number:

The calculated price.

createImage
(
  • openInBlankPage= true
  • forceDownload=false
  • backgroundColor=transparent
  • options
)

Creates an image of the current showing product.

Parameters:

  • [openInBlankPage= true] Boolean optional

    Opens the image in a Pop-up window.

  • [forceDownload=false] Boolean optional

    Downloads the image to the user's computer.

  • [backgroundColor=transparent] String optional

    The background color as hexadecimal value. For 'png' you can also use 'transparent'.

  • [options] String optional

    See fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toDataURL.

    • [onlyExportable=false] Boolean optional

      If true elements with excludeFromExport=true are not exported in the image.

deselectElement ()

Deselects the selected element of the current showing view.

formatPrice
(
  • price
)
String

Formats the price to a string with the currency and the decimal as well as the thousand separator.

Parameters:

  • [price] Number optional

    The price thats gonna be formatted.

Returns:

String:

The formatted price string.

getCustomElements
(
  • type='all'
  • viewIndex=-1
  • deselectElement=true
)
Array

Returns an array with all custom added elements.

Parameters:

  • [type='all'] String optional

    The type of elements. Possible values: 'all', 'image', 'text'.

  • [viewIndex=-1] Number optional

    The index of the target view. By default all views are target.

  • [deselectElement=true] String optional

    Deselect current selected element.

Returns:

Array:

An array with objects with the fabric object and the view index.

getDepositPhotos () Array

Get an array with image objects from depositphotos.com that are used in the current showing product.

Returns:

Array:

An array containing objects. The object contains the depositphotos media ID and the URL to the image that has been uploaded to the server.

getDepositPhotosPurchaseMedia
(
  • callback
  • mediaID
  • username
  • password
  • size=s
  • license=standard
  • purchaseCurrency=credits
)

Get an object containing the download link for a media. Whenever you call this method, credits will be taken from your depositphotos account to purchase a media. You can find more infos about the Depositphotos API here: http://api.depositphotos.com/doc/classes/API.Purchase.html

Parameters:

  • callback Function

    A function that will be called with JSON data has been loaded. Will also be executed on failure.

  • mediaID String

    A Depositphotos media ID.

  • username String

    Your Depositphotos username.

  • password String

    Your Depositphotos password.

  • [size=s] String optional

    Possible values: s/m/l/xl/vect/el0.

  • [license=standard] String optional

    Possible values: standard or extended.

  • [purchaseCurrency=credits] String optional

    The license. Possible values: 'credits' | 'subscription' | 'bonus' | 'ondemand'.

Example:

  				
fpd.getDepositPhotosPurchaseMedia(function(data) {
  }, '12345', 'username', 'password', 'm')
getElementByID
(
  • id
  • viewIndex
)

Get an elment by ID.

Parameters:

  • id Number

    The id of an element.

  • [viewIndex] Number optional

    The view index you want to search in. If no index is set, it will use the current showing view.

getElementByTitle
(
  • title
  • viewIndex=-1
)
fabric.Object

Returns an fabric object by title.

Parameters:

  • title String

    The title of an element.

  • [viewIndex=-1] Number optional

    The index of the target view. By default all views are scanned.

Returns:

fabric.Object:

FabricJS Object.

getElements
(
  • viewIndex=-1
  • elementType='all'
  • deselectElement=true
)
Array

Returns an array with fabricjs objects.

Parameters:

  • [viewIndex=-1] Number optional

    The index of the target view. By default all views are target.

  • [elementType='all'] String optional

    The type of elements to return. By default all types are returned. Possible values: text, image.

  • [deselectElement=true] String optional

    Deselect current selected element.

Returns:

Array:

An array containg the elements.

getOrder
(
  • options={}
)
Object

Returns an order object containing the product from the getProduct() method. If using plus add-on and bulk variations, the variations will be added into the object.

Parameters:

  • [options={}] Object optional

    Options for the methods that are called inside this mehtod, e.g. getProduct() can receive two parameters.

Returns:

Object:

An object containing different objects representing important order data.

Example:

  				
// includes only editable elements and the user needs to customize the initial product
  fpd.getOrder( {onlyEditableElements: true, customizationRequired: true} );
getProduct
(
  • onlyEditableElements=false
  • customizationRequired=false
)
Array

Returns the current showing product with all views and elements in the views.

Parameters:

  • [onlyEditableElements=false] Boolean optional

    If true, only the editable elements will be returned.

  • [customizationRequired=false] Boolean optional

    To receive the product the user needs to customize the initial elements.

Returns:

Array:

An array with all views. A view is an object containing the title, thumbnail, custom options and elements. An element object contains the title, source, parameters and type.

getProductDataURL
(
  • callback
  • backgroundColor=transparent
  • options={}
)

Creates all views in one data URL. The different views will be positioned below each other.

Parameters:

  • callback Function

    A function that will be called when the data URL is created. The function receives the data URL.

  • [backgroundColor=transparent] String optional

    The background color as hexadecimal value. For 'png' you can also use 'transparent'.

  • [options={}] Object optional

    See fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toDataURL.

    • [onlyExportable=false] Boolean optional

      If true elements with excludeFromExport=true are not exported in the image.

Example:

  				
fpd.getProductDataURL( function(dataURL){} );
getTranslation
(
  • section
  • label
)

Get the translation of a label.

Parameters:

  • section String

    The section key you want - toolbar, actions, modules or misc.

  • label String

    The label key.

getUsedColors
(
  • viewIndex=-1
)
Array

Get all used colors from a single or all views.

Parameters:

  • [viewIndex=-1] Number optional

    The index of the target view. By default all views are target.

Returns:

Array:

An array with hexdecimal color values.

getUsedFonts () Array

Get all fonts used in the product.

Returns:

Array:

An array with objects containing the font name and optional the URL to the font.

getViewsDataURL
(
  • callback
  • backgroundColor=transparent
  • options={}
)
Array

Gets the views as data URL.

Parameters:

  • callback Function

    A function that will be called when the data URL is created. The function receives the data URL.

  • [backgroundColor=transparent] String optional

    The background color as hexadecimal value. For 'png' you can also use 'transparent'.

  • [options={}] String optional

    See fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toDataURL.

    • [onlyExportable=false] Boolean optional

      If true elements with excludeFromExport=true are not exported in the image.

Returns:

Array:

An array with all views as data URLs.

getViewsSVG
(
  • options
  • reviver
)
Array

Returns the views as SVG.

Parameters:

Returns:

Array:

An array with all views as SVG.

loadFonts
(
  • fonts
  • callback
)

Load custom fonts or from Google webfonts used in the product designer.

Parameters:

  • fonts Array

    An array containing objects with name and URL to the font file.

  • callback Function

    A function that will be called when all fonts have been loaded.

loadProduct
(
  • views
  • onlyReplaceInitialElements=false
  • mergeMainOptions=false
)

Loads a new product to the product designer.

Parameters:

  • views Array

    An array containing the views for the product.

  • [onlyReplaceInitialElements=false] Boolean optional

    If true, the initial elements will be replaced. Custom added elements will stay on the canvas.

  • [mergeMainOptions=false] Boolean optional

    Merges the main options into every view options.

print ()

Opens the current showing product in a Pop-up window and shows the print dialog.

removeView
(
  • viewIndex=0
)

Removes a view by its index value.

Parameters:

  • [viewIndex=0] Number optional

    The index of the target view.

reset ()

Clears the product stage and resets everything.

resetZoom ()

Resets the zoom.

selectProduct
(
  • index
  • categoryIndex
)

Selects a product by index and category index.

Parameters:

  • index Number

    The requested product by an index value. 0 will load the first product.

  • [categoryIndex] Number optional

    The requested category by an index value. 0 will load the first category.

Example:

  				
fpd.selectProduct( 1, 2 ); //will load the second product from the third category
selectView
(
  • index
)

Selects a view from the current visible views.

Parameters:

  • index Number

    The requested view by an index value. 0 will load the first view.

setDimensions
(
  • width
  • height
)

Sets the dimensions of all views.

Parameters:

  • width Number

    The width in pixel.

  • height Number

    The height in pixel.

setElementParameters
(
  • parameters
  • element
  • viewIndex
)

Sets the parameters for a specified element.

Parameters:

  • parameters Object

    An object with the parameters that should be applied to the element.

  • [element] fabric.Object | string optional

    A fabric object or the title of an element. If not set, the current selected element is used.

  • [viewIndex] Number optional

    The index of the view you would like target. If not set, the current showing view will be used.

setOrderQuantity
(
  • quantity
)

Sets the order quantity.

Parameters:

  • quantity Number

    The width in pixel.

setupDesigns
(
  • designs
)

Set up the designs with a JSON.

Parameters:

  • designs Array

    An array containg the categories with designs.

Example:

  				
[{
  "title": "Category Title", "thumbnail": "Thumbnail of Category", "designs": [ARRAY OF ELEMENTS]},
  {"title": "Category Title", "thumbnail": "Thumbnail of Category", "category": [
  {"title": "Category Child", "thumbnail": "Thumbnail of Category", "designs": [ARRAY OF ELEMENTS]}
  ]}
  ]
setupProducts
(
  • products
)

Set up the products with a JSON.

Parameters:

  • products Array

    An array containg the products or categories with products.

Example:

  				
[{
  "category": "Category Title", "products":
  [{"productTitle": "TITLE OF PRODUCT", "productThumbnail": "THUMBNAIL OF PRODUCT" "title": "TITLE OF VIEW", "thumbnail": "THUMBNAIL OF VIEW", "OPTIONS": {OBJECT VIEW OPTIONS}, "ELEMENTS": [ARRAY OF ELEMENTS]
  ...
  ]}
setZoom
(
  • value
)

Sets the zoom of the stage. 1 is equal to no zoom.

Parameters:

  • value Number

    The zoom value.

toggleResponsive
(
  • toggle
)
Boolean

Toggle the responsive behavior.

Parameters:

  • [toggle] Boolean optional

    True or false.

Returns:

Boolean:

Returns true or false.

toggleSpinner
(
  • state
  • msg
)
JQuery

Shows or hides the spinner with an optional message.

Parameters:

  • state String

    The state can be "show" or "hide".

  • msg Boolean

    The message that will be displayed underneath the spinner.

Returns:

JQuery:

$stageLoader jQuery object containing the stage loader.

$elementTooltip

JQuery

jQuery object pointing on the tooltip for the current selected element.

$modalContainer

JQuery

The container for internal modals.


Default: 0

$productStage

JQuery

jQuery object pointing on the product stage.

bulkVariations

FPDBulkVariations

If FPDBulkVariations is used with the product designer, this is the instance to the FPDBulkVariations class.


Default: null

colorLinkGroups

Object

Object containing all color link groups.


Default: {}

currentCategoryIndex

Number

The current selected product category index.


Default: 0

currentElement

fabric.Object

The current selected element.


Default: null

currentPrice

Number

The price considering the elements price in all views with order quantity.


Default: 0

currentProductIndex

Number

The current selected product index.


Default: 0

currentViewIndex

Number

The current selected view index.


Default: 0

currentViewInstance

FancyProductDesignerView

The current view instance.


Default: null

currentViews

Array

The current views.


Default: null

designs

Array

Array containing all added designs.

doUnsavedAlert

Boolean

Indicates if the product was saved.


Default: false

langJson

Object

JSON Object containing all translations.


Default: null

mainOptions

Object

The main options set for this Product Designer.

orderQuantity

Number

The order quantity.


Default: 1

pricingRulesPrice

Number

The calculated price for the pricing rules.


Default: 0

productCreated

Boolean

Indicates if the product is created or not.


Default: false

products

Array

Array containing all added products categorized.

singleProductPrice

Number

The price considering the elements price in all views without order quantity.


Default: 0

viewInstances

Array

Array containing all FancyProductDesignerView instances of the current showing product.


Default: []

watermarkImg

String

URL to the watermark image if one is set via options.


Default: null

FancyProductDesigner#boundingBoxToggle

Gets fired as soon as the bounding box is added to or removed from the stage.

Event Payload:

  • event Event
  • currentBoundingObject fabric.Object
    • A fabricJS rectangle representing the bounding box.
  • addRemove Boolean
    • True=added, false=removed.

FancyProductDesigner#canvasFail

Gets fired when the browser does not support HTML5 canvas.

Event Payload:

  • event Event

FancyProductDesigner#canvasFail

Gets fired as soon as the screen size has changed. Breakpoints: Smartphone Width < 568, Tablet Width > 568 and < 768, Desktop Width > 768.

Event Payload:

  • event Event
  • device String

    Possible values: desktop, tablet, smartphone.

FancyProductDesigner#clear

Gets fired as soon as the stage has been cleared.

Event Payload:

  • event Event

FancyProductDesigner#designsSet

Gets fired as soon as designs are set either from the HTML or added as JSON.

Event Payload:

  • event Event
  • designs Array
    • An array containing the designs.

FancyProductDesigner#elementAdd

Gets fired when an element is added.

Event Payload:

  • event Event
  • element fabric.Object

FancyProductDesigner#elementChange

Gets fired when an element is changed.

Event Payload:

  • event Event
  • element fabric.Object

FancyProductDesigner#elementColorChange

Gets fired when the color of an element is changed.

Event Payload:

  • event Event
  • element fabric.Object
  • hex String

    Hexadecimal color string.

  • colorLinking Boolean

    Color of element is linked to other colors.

FancyProductDesigner#elementModify

Gets fired when an element is modified.

Event Payload:

  • event Event
  • element fabric.Object
  • parameters Object

FancyProductDesigner#elementRemove

Gets fired as soon as an element has been removed.

Event Payload:

  • event Event
  • element fabric.Object
    • The fabric object that has been removed.

FancyProductDesigner#elementSelect

Gets fired when an element is selected.

Event Payload:

  • event Event
  • element fabric.Object

FancyProductDesigner#langJSONLoad

Gets fired when the language JSON is loaded.

Event Payload:

  • event Event
  • langJSON Object
    • A JSON containing the translation.

FancyProductDesigner#layersListUpdate

Gets fired as soon as the list with the layers has been updated. Is fired when a view is selected or an object has been added/removed.

Event Payload:

  • event Event

FancyProductDesigner#modalDesignerClose

Gets fired when the modal with the product designer closes.

Event Payload:

  • event Event

FancyProductDesigner#modalDesignerOpen

Gets fired when the modal with the product designer opens.

Event Payload:

  • event Event

FancyProductDesigner#priceChange

Gets fired as soon as the price changes in a view.

Event Payload:

  • event Event
  • elementPrice Number
    • The price of the element.
  • totalPrice Number
    • The true price of all views with quantity.
  • singleProductPrice Number
    • The true price of all views without quantity.

FancyProductDesigner#productAdd

Gets fired when a product is added.

Event Payload:

  • event Event
  • views Array
    • The product views.
  • category String
    • The category title.
  • catIndex Number
    • The index of the category.

FancyProductDesigner#productCreate

Gets fired as soon as a product has been fully added to the designer.

Event Payload:

  • event Event
  • currentViews Array
    • An array containing all views of the product.

FancyProductDesigner#productSelect

Gets fired when a product is selected.

Event Payload:

  • event Event
  • index Number
    • The index of the product in the category.
  • categoryIndex Number
    • The index of the category.
  • product Object
    • An object containing the product (views).

FancyProductDesigner#productsSet

Gets fired as soon as products are set either from the HTML or added as JSON.

Event Payload:

  • event Event
  • products Array
    • An array containing the products.

FancyProductDesigner#ready

Gets fired as soon as the product designer is ready to receive API calls.

Event Payload:

  • event Event

FancyProductDesigner#templateLoad

Gets fired as soon as a template has been loaded.

Event Payload:

  • event Event
  • URL String
    • The URL of the loaded template.

FancyProductDesigner#uiSet

Gets fired as soon as the user interface with all modules, actions is set and translated.

Event Payload:

  • event Event

FancyProductDesigner#undoRedoSet

Gets fired when an undo or redo state is set.

Event Payload:

  • event Event
  • undos Array
    • Array containing all undo objects.
  • redos Array
    • Array containing all redo objects.

FancyProductDesigner#viewCanvasUpdate

Gets fired when an element is modified.

Event Payload:

FancyProductDesigner#viewCreate

Gets fired when a view is created.

Event Payload:

FancyProductDesigner#viewRemove

Gets fired when a view is removed.

Event Payload:

  • event Event
  • viewIndex Number

FancyProductDesigner#viewSelect

Gets fired as soon as a view has been selected.

Event Payload:

  • event Event
  • viewIndex Number
  • viewInstance Object