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
-
elem
-
opts
Parameters:
-
elem
HTMLElement | jQuery- A HTML element with an unique ID.
-
[opts]
Object optional- See Options.defaults.
Methods
- addCustomImage
- addElement
- addProduct
- addView
- calculatePrice
- createImage
- deselectElement
- formatPrice
- getCustomElements
- getDepositPhotos
- getDepositPhotosPurchaseMedia
- getElementByID
- getElementByTitle
- getElements
- getFixedElements
- getOrder
- getPrintOrderData
- getProduct
- getProductDataURL
- getTranslation
- getUsedColors
- getUsedFonts
- getViewsDataURL
- getViewsSVG
- loadFonts
- loadProduct
- removeView
- reset
- resetZoom
- selectProduct
- selectView
- setDimensions
- setElementParameters
- setOrderQuantity
- setupDesigns
- setupProducts
- setZoom
- toggleResponsive
- toggleSpinner
Properties
- $elementTooltip
- $modalContainer
- $productStage
- bulkVariations
- colorLinkGroups
- currentCategoryIndex
- currentElement
- currentPrice
- currentProductIndex
- currentViewIndex
- currentViewInstance
- currentViews
- designs
- doUnsavedAlert
- fixedElements
- globalCustomElements
- langJson
- mainOptions
- orderQuantity
- pricingRulesPrice
- productCreated
- products
- singleProductPrice
- viewInstances
- watermarkImg
Events
- FancyProductDesigner#boundingBoxToggle
- FancyProductDesigner#canvasFail
- FancyProductDesigner#canvasFail
- FancyProductDesigner#clear
- FancyProductDesigner#designsSet
- FancyProductDesigner#elementAdd
- FancyProductDesigner#elementChange
- FancyProductDesigner#elementColorChange
- FancyProductDesigner#elementModify
- FancyProductDesigner#elementRemove
- FancyProductDesigner#elementSelect
- FancyProductDesigner#langJSONLoad
- FancyProductDesigner#layersListUpdate
- FancyProductDesigner#modalDesignerClose
- FancyProductDesigner#modalDesignerOpen
- FancyProductDesigner#priceChange
- FancyProductDesigner#priceChange
- FancyProductDesigner#productAdd
- FancyProductDesigner#productAdd
- FancyProductDesigner#productCreate
- FancyProductDesigner#productSelect
- FancyProductDesigner#productsSet
- FancyProductDesigner#ready
- FancyProductDesigner#templateLoad
- FancyProductDesigner#uiSet
- FancyProductDesigner#undoRedoSet
- FancyProductDesigner#viewCanvasUpdate
- FancyProductDesigner#viewCreate
- FancyProductDesigner#viewRemove
- FancyProductDesigner#viewSelect
- FancyProductDesigner#viewSizeChange
-
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
StringThe URL of the image.
-
title
StringThe title for the design.
-
options
ObjectAdditional options.
-
type
-
source
-
title
-
parameters={}
-
viewIndex
Adds a new element to the product designer.
Parameters:
-
type
StringThe type of an element you would like to add, 'image' or 'text'.
-
source
StringFor image the URL to the image and for text elements the default text.
-
title
StringOnly required for image elements.
-
[parameters={}]
Object optionalAn object with the parameters, you would like to apply on the element.
-
[viewIndex]
Number optionalThe 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.
-
views
-
category
Adds a new product to the product designer.
Parameters:
-
views
ArrayAn 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 optionalIf categories are used, you need to define the category title.
-
view
Adds a view to the current visible product.
Parameters:
-
view
ObjectAn object with title, thumbnail and elements properties.
-
considerQuantity=true
Calculates the total price considering the elements price in all views and pricing rules.
Parameters:
-
[considerQuantity=true]
Boolean optionalCalculate with or without quantity.
Returns:
The calculated price.
-
openInBlankPage= true
-
forceDownload=false
-
backgroundColor=transparent
-
options
-
onlyCurrentView
Creates an image of the current showing product.
Parameters:
-
[openInBlankPage= true]
Boolean optionalOpens the image in a Pop-up window.
-
[forceDownload=false]
Boolean optionalDownloads the image to the user's computer.
-
[backgroundColor=transparent]
String optionalThe background color as hexadecimal value. For 'png' you can also use 'transparent'.
-
[options]
String optionalSee fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toDataURL.
-
[onlyExportable=false]
Boolean optionalIf true elements with excludeFromExport=true are not exported in the image.
-
-
[onlyCurrentView]
Boolean optionalIf true only the curent showing view will be exported.
-
price
Formats the price to a string with the currency and the decimal as well as the thousand separator.
Parameters:
-
[price]
Number optionalThe price thats gonna be formatted.
Returns:
The formatted price string.
-
type='all'
-
viewIndex=-1
-
deselectElement=true
Returns an array with all custom added elements.
Parameters:
-
[type='all']
String optionalThe type of elements. Possible values: 'all', 'image', 'text'.
-
[viewIndex=-1]
Number optionalThe index of the target view. By default all views are target.
-
[deselectElement=true]
String optionalDeselect current selected element.
Returns:
An array with objects with the fabric object and the view index.
Get an array with image objects from depositphotos.com that are used in the current showing product.
Returns:
An array containing objects. The object contains the depositphotos media ID and the URL to the image that has been uploaded to the server.
-
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
FunctionA function that will be called with JSON data has been loaded. Will also be executed on failure.
-
mediaID
StringA Depositphotos media ID.
-
username
StringYour Depositphotos username.
-
password
StringYour Depositphotos password.
-
[size=s]
String optionalPossible values: s/m/l/xl/vect/el0.
-
[license=standard]
String optionalPossible values: standard or extended.
-
[purchaseCurrency=credits]
String optionalThe license. Possible values: 'credits' | 'subscription' | 'bonus' | 'ondemand'.
Example:
fpd.getDepositPhotosPurchaseMedia(function(data) { }, '12345', 'username', 'password', 'm')
-
id
-
viewIndex
Get an elment by ID.
Parameters:
-
id
NumberThe id of an element.
-
[viewIndex]
Number optionalThe view index you want to search in. If no index is set, it will use the current showing view.
-
title
-
viewIndex=-1
Returns an fabric object by title.
Parameters:
-
title
StringThe title of an element.
-
[viewIndex=-1]
Number optionalThe index of the target view. By default all views are scanned.
Returns:
FabricJS Object.
-
viewIndex=-1
-
elementType='all'
-
deselectElement=true
Returns an array with fabricjs objects.
Parameters:
-
[viewIndex=-1]
Number optionalThe index of the target view. By default all views are target.
-
[elementType='all']
String optionalThe type of elements to return. By default all types are returned. Possible values: text, image.
-
[deselectElement=true]
String optionalDeselect current selected element.
Returns:
An array containg the elements.
-
type='all'
-
viewIndex=-1
-
deselectElement=true
Returns an array with all fixed elements.
Parameters:
-
[type='all']
String optionalThe type of elements. Possible values: 'all', 'image', 'text'.
-
[viewIndex=-1]
Number optionalThe index of the target view. By default all views are target.
-
[deselectElement=true]
String optionalDeselect current selected element.
Returns:
An array with objects with the fabric object and the view index.
-
options={}
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 optionalOptions for the methods that are called inside this mehtod, e.g. getProduct() can receive two parameters.
Returns:
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} );
Generates an object that will be used for the print-ready export. This objects includes the used fonts and the SVG data strings to generate the PDF.
-
onlyEditableElements=false
-
customizationRequired=false
Returns the current showing product with all views and elements in the views.
Parameters:
-
[onlyEditableElements=false]
Boolean optionalIf true, only the editable elements will be returned.
-
[customizationRequired=false]
Boolean optionalTo receive the product the user needs to customize the initial elements.
Returns:
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.
-
callback
-
backgroundColor=transparent
-
options={}
-
viewRange
Creates all views in one data URL. The different views will be positioned below each other.
Parameters:
-
callback
FunctionA function that will be called when the data URL is created. The function receives the data URL.
-
[backgroundColor=transparent]
String optionalThe background color as hexadecimal value. For 'png' you can also use 'transparent'.
-
[options={}]
Object optionalSee fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toDataURL.
-
[onlyExportable=false]
Boolean optionalIf true elements with excludeFromExport=true are not exported in the image.
-
-
viewRange
ArrayAn array defining the start and the end indexes of the exported views.
Example:
fpd.getProductDataURL( function(dataURL){} );
-
section
-
label
Get the translation of a label.
Parameters:
-
section
StringThe section key you want - toolbar, actions, modules or misc.
-
label
StringThe label key.
-
viewIndex=-1
Get all used colors from a single or all views.
Parameters:
-
[viewIndex=-1]
Number optionalThe index of the target view. By default all views are target.
Returns:
An array with hexdecimal color values.
Get all fonts used in the product.
Returns:
An array with objects containing the font name and optional the URL to the font.
-
callback
-
backgroundColor=transparent
-
options={}
Gets the views as data URL.
Parameters:
-
callback
FunctionA function that will be called when the data URL is created. The function receives the data URL.
-
[backgroundColor=transparent]
String optionalThe background color as hexadecimal value. For 'png' you can also use 'transparent'.
-
[options={}]
String optionalSee fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toDataURL.
-
[onlyExportable=false]
Boolean optionalIf true elements with excludeFromExport=true are not exported in the image.
-
Returns:
An array with all views as data URLs.
-
options
-
reviver
Returns the views as SVG.
Parameters:
-
options
Object -
reviver
Function
Returns:
An array with all views as SVG.
-
fonts
-
callback
Load custom fonts or from Google webfonts used in the product designer.
Parameters:
-
fonts
ArrayAn array containing objects with name and URL to the font file.
-
callback
FunctionA function that will be called when all fonts have been loaded.
-
views
-
onlyReplaceInitialElements=false
-
mergeMainOptions=false
Loads a new product to the product designer.
Parameters:
-
views
ArrayAn array containing the views for the product.
-
[onlyReplaceInitialElements=false]
Boolean optionalIf true, the initial elements will be replaced. Custom added elements will stay on the canvas.
-
[mergeMainOptions=false]
Boolean optionalMerges the main options into every view options.
-
viewIndex=0
Removes a view by its index value.
Parameters:
-
[viewIndex=0]
Number optionalThe index of the target view.
-
index
-
categoryIndex
Selects a product by index and category index.
Parameters:
-
index
NumberThe requested product by an index value. 0 will load the first product.
-
[categoryIndex]
Number optionalThe 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
-
index
Selects a view from the current visible views.
Parameters:
-
index
NumberThe requested view by an index value. 0 will load the first view.
-
width
-
height
-
viewIndex=-1
Sets the dimensions of all views.
Parameters:
-
width
NumberThe width in pixel.
-
height
NumberThe height in pixel.
-
[viewIndex=-1]
Number optionalThe target views. -1 targets all views.
-
parameters
-
element
-
viewIndex
Sets the parameters for a specified element.
Parameters:
-
parameters
ObjectAn object with the parameters that should be applied to the element.
-
[element]
fabric.Object | string optionalA fabric object or the title of an element. If not set, the current selected element is used.
-
[viewIndex]
Number optionalThe index of the view you would like target. If not set, the current showing view will be used.
-
quantity
Sets the order quantity.
Parameters:
-
quantity
NumberThe width in pixel.
-
designs
Set up the designs with a JSON.
Parameters:
-
designs
ArrayAn 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]} ]} ]
-
products
Set up the products with a JSON.
Parameters:
-
products
ArrayAn 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] ... ]}
-
value
Sets the zoom of the stage. 1 is equal to no zoom.
Parameters:
-
value
NumberThe zoom value.
bulkVariations
FPDBulkVariationsIf FPDBulkVariations is used with the product designer, this is the instance to the FPDBulkVariations class.
Default: null
currentPrice
NumberThe price considering the elements price in all views with order quantity.
Default: 0
singleProductPrice
NumberThe price considering the elements price in all views without order quantity.
Default: 0
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
StringPossible 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
StringHexadecimal color string.
-
colorLinking
BooleanColor 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#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 all elements of layout are added.
Event Payload:
-
event
Event -
elements
Array- Added elements.
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:
-
event
Event -
viewInstance
FancyProductDesignerView
FancyProductDesigner#viewCreate
Gets fired when a view is created.
Event Payload:
-
event
Event -
viewInstance
FancyProductDesignerView
FancyProductDesigner#viewRemove
Gets fired when a view is removed.
Event Payload:
-
event
Event -
viewIndex
Number