Skip to main content

FancyProductDesigner

Classes

FancyProductDesignerEventTarget

Functions

setupDesigns(designs)

Set up the designs with a JSON.

addProduct(views, [category])

Adds a new product to the product designer.

loadProduct(views, [onlyReplaceInitialElements], [mergeMainOptions])

Loads a new product to the product designer.

addView(view)

Adds a view to the current visible product.

getIndex()Number

Gets the index of the view.

selectView(index)

Selects a view from the current visible views.

getElements([viewIndex], [elementType], [deselectElement])Array

Returns an array with fabricjs objects.

getCustomElements([type], [viewIndex], [deselectElement])array

Returns an array with all custom added elements.

getFixedElements([type], [viewIndex], [deselectElement])array

Returns an array with all fixed elements.

reset()

Clears the product stage and resets everything.

deselectElement()

Deselects the selected element of the current showing view.

addCustomImage(source, title, options, [viewIndex])

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.

toggleResponsive([toggle])Boolean

Toggle the responsive behavior.

getProduct([onlyEditableElements], [customizationRequired])array

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

getProductDataURL(callback, [options], [viewRange])

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

getViewsDataURL(callback, [options])array

Gets the views as data URL.

print()

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

getUsedFonts()array

Get all fonts used in the product.

getViewsSVG(options)array

Returns the views as SVG.

getUsedColors([viewIndex])array

Get all used colors from a single or all views.

removeView([viewIndex])

Removes a view by index. If no viewIndex is set, it will remove the first view.

setOrderQuantity(quantity)

Sets the order quantity.

getOrder([options])object

Returns an order object containing the product from the getProduct() method, usedFonts from getUsedFonts() and usedColors from getUsedColors().

getPrintOrderData()

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.

calculatePrice([considerQuantity])Number

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

Events

"ready" (event)

Gets fired as soon as product designer is ready, e.g. to make any method call.

"productsSet" (event)

Gets fired as soon as products are set.

"designsSet" (event)

Gets fired as soon as the designs are set.

"productAdd" (event)

Gets fired when a product is added.

"productSelect" (event)

Gets fired when a product is selected.

"beforeElementAdd" (event, element)

Gets fired when an element is added.

"elementAdd" (event, element)

Gets fired when an element is added.

"elementRemove" (event, element)

Gets fired as soon as an element has been removed.

"elementSelect" (event)

Gets fired when an element is selected.

"elementFillChange" (event, element, hex, colorLinking)

Gets fired when the color of an element is changed.

"elementModify" (event)

Gets fired when an element is modified.

"productCreate" (event)

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

"historyAction" (event)

Gets fired as soon as any action for canvas history is executed.

"viewCreate" (event, viewInstance)

Gets fired when a view is created.

"imageDPIWarningOn" (event)

Gets fired when the DPI of an image is below the minDPI and the warning is shown.

"imageDPIWarningOff" (event)

Gets fired when the DPI of an image is in range.

"viewSelect" (event)

Gets fired as soon as a view has been selected.

"clear" (event)

Gets fired as soon as the stage has been cleared.

"viewRemove" (event)

Gets fired when a view is removed.

"getOrder" (event)

Gets fired before the data of getOrder is returned. Useful to manipulate order data.

"priceChange" (event)

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

FancyProductDesigner ⇐ EventTarget

Kind: global class
Extends: EventTarget

new FancyProductDesigner(elem, [opts])

Creates a new FancyProductDesigner.

ParamTypeDefaultDescription
elemHTMLElementThe container for the Fancy Product Designer.
[opts]Object{}Options for configuration.

FancyProductDesigner.additionalModules : Object

You can register your own modules and add them in this static property.

Kind: static property of FancyProductDesigner
Default: {}
Access: public
Read only: true
Example

{'my-module': ModuleClass}

FancyProductDesigner~container : HTMLElement

The container for the Fancy Product Designer.

Kind: inner property of FancyProductDesigner
Default: null
Read only: true

FancyProductDesigner~mainOptions : Object

The main options set for this Product Designer.

Kind: inner property of FancyProductDesigner
Default: {}
Read only: true

FancyProductDesigner~currentViewInstance : FancyProductDesignerView

The current selected view instance.

Kind: inner property of FancyProductDesigner
Read only: true

FancyProductDesigner~currentViewIndex : Number

The current selected view index.

Kind: inner property of FancyProductDesigner
Default: 0

FancyProductDesigner~products : Array

Array containing all products.

Kind: inner property of FancyProductDesigner
Read only: true

FancyProductDesigner~designs : Array

Array containing all designs.

Kind: inner property of FancyProductDesigner
Read only: true

FancyProductDesigner~modalContainer : HTMLElement

The container for internal modals.

Kind: inner property of FancyProductDesigner
Default: document.body

FancyProductDesigner~currentCategoryIndex : Number

The current selected product category index.

Kind: inner property of FancyProductDesigner
Default: 0

FancyProductDesigner~currentProductIndex : Number

The current selected product index.

Kind: inner property of FancyProductDesigner
Default: 0

FancyProductDesigner~viewInstances : Array

Array containing all FancyProductDesignerView instances of the current showing product.

Kind: inner property of FancyProductDesigner
Default: []

FancyProductDesigner~productViews : Array

The initial views of the current product.

Kind: inner property of FancyProductDesigner
Default: null

FancyProductDesigner~currentElement : fabric.Object

The current selected element.

Kind: inner property of FancyProductDesigner
Default: null
Properties

Name
currentElement

FancyProductDesigner~productCreated : Boolean

Indicates if the product is created or not.

Kind: inner property of FancyProductDesigner
Default: false

FancyProductDesigner~colorLinkGroups : Object

Object containing all color link groups.

Kind: inner property of FancyProductDesigner
Default: {}

FancyProductDesigner~globalCustomElements : Array

Array with all added custom elements.

Kind: inner property of FancyProductDesigner
Default: []

FancyProductDesigner~doUnsavedAlert : Boolean

Indicates if the product was saved.

Kind: inner property of FancyProductDesigner
Default: false

FancyProductDesigner~currentPrice : Number

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

Kind: inner property of FancyProductDesigner
Default: 0
Properties

Name
currentPrice

FancyProductDesigner~singleProductPrice : Number

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

Kind: inner property of FancyProductDesigner
Default: 0
Properties

Name
singleProductPrice

FancyProductDesigner~pricingRulesPrice : Number

The calculated price for the pricing rules.

Kind: inner property of FancyProductDesigner
Default: 0
Properties

Name
pricingRulesPrice

setupDesigns(designs)

Set up the designs with a JSON.

Kind: global function

ParamTypeDescription
designsArrayAn array containg the categories with designs.

addProduct(views, [category])

Adds a new product to the product designer.

Kind: global function

ParamTypeDescription
viewsarrayAn 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]stringIf categories are used, you need to define the category title.

loadProduct(views, [onlyReplaceInitialElements], [mergeMainOptions])

Loads a new product to the product designer.

Kind: global function

ParamTypeDefaultDescription
viewsarrayAn array containing the views for the product.
[onlyReplaceInitialElements]BooleanfalseIf true, the initial elements will be replaced. Custom added elements will stay on the canvas.
[mergeMainOptions]BooleanfalseMerges the main options into every view options.

addView(view)

Adds a view to the current visible product.

Kind: global function

ParamTypeDescription
viewobjectAn object with title, thumbnail and elements properties.

getIndex() ⇒ Number

Gets the index of the view.

Kind: global function
Returns: Number - The index.

selectView(index)

Selects a view from the current visible views.

Kind: global function

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

getElements([viewIndex], [elementType], [deselectElement]) ⇒ Array

Returns an array with fabricjs objects.

Kind: global function
Returns: Array - An array containg the elements.

ParamTypeDefaultDescription
[viewIndex]Number-1The index of the target view. By default all views are target.
[elementType]String'all'The type of elements to return. By default all types are returned. Possible values: text, image.
[deselectElement]StringtrueDeselect current selected element.

getCustomElements([type], [viewIndex], [deselectElement]) ⇒ array

Returns an array with all custom added elements.

Kind: global function
Returns: array - An array with objects with the fabric object and the view index.

ParamTypeDefaultDescription
[type]string"'all'"The type of elements. Possible values: 'all', 'image', 'text'.
[viewIndex]Number-1The index of the target view. By default all views are target.
[deselectElement]StringtrueDeselect current selected element.

getFixedElements([type], [viewIndex], [deselectElement]) ⇒ array

Returns an array with all fixed elements.

Kind: global function
Returns: array - An array with objects with the fabric object and the view index.

ParamTypeDefaultDescription
[type]string"'all'"The type of elements. Possible values: 'all', 'image', 'text'.
[viewIndex]Number-1The index of the target view. By default all views are target.
[deselectElement]StringtrueDeselect current selected element.

reset()

Clears the product stage and resets everything.

Kind: global function

deselectElement()

Deselects the selected element of the current showing view.

Kind: global function

addCustomImage(source, title, options, [viewIndex])

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.

Kind: global function

ParamTypeDescription
sourcestringThe URL of the image.
titlestringThe title for the design.
optionsObjectAdditional options.
[viewIndex]numberThe 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.

toggleResponsive([toggle]) ⇒ Boolean

Toggle the responsive behavior.

Kind: global function
Returns: Boolean - Returns true or false.

ParamTypeDescription
[toggle]BooleanTrue or false.

getProduct([onlyEditableElements], [customizationRequired]) ⇒ array

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

Kind: global function
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.

ParamTypeDefaultDescription
[onlyEditableElements]booleanfalseIf true, only the editable elements will be returned.
[customizationRequired]booleanfalseTo receive the product the user needs to customize the initial elements.

getProductDataURL(callback, [options], [viewRange])

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

Kind: global function

ParamTypeDefaultDescription
callbackfunctionA function that will be called when the data URL is created. The function receives the data URL.
[options]ObjectSee FancyProductDesignerView#toDataURL.
[viewRange]Array[]An array defining the start and the end indexes of the exported views. When not defined, all views will be exported.

Example

fpd.getProductDataURL( function(dataURL){} );

getViewsDataURL(callback, [options]) ⇒ array

Gets the views as data URL.

Kind: global function
Returns: array - An array with all views as data URLs.

ParamTypeDescription
callbackfunctionA function that will be called when the data URL is created. The function receives the data URL.
[options]stringSee FancyProductDesignerView#toDataURL.

print()

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

Kind: global function

getUsedFonts() ⇒ array

Get all fonts used in the product.

Kind: global function
Returns: array - An array with objects containing the font name and optional the URL to the font.

getViewsSVG(options) ⇒ array

Returns the views as SVG.

Kind: global function
Returns: array - An array with all views as SVG.

ParamTypeDescription
optionsObjectSee FancyProductDesignerView#toSVG.

getUsedColors([viewIndex]) ⇒ array

Get all used colors from a single or all views.

Kind: global function
Returns: array - An array with hexdecimal color values.

ParamTypeDefaultDescription
[viewIndex]Number-1The index of the target view. By default all views are target.

removeView([viewIndex])

Removes a view by index. If no viewIndex is set, it will remove the first view.

Kind: global function

ParamTypeDefaultDescription
[viewIndex]Number0The index of the target view.

setOrderQuantity(quantity)

Sets the order quantity.

Kind: global function

ParamTypeDescription
quantityNumberThe width in pixel.

getOrder([options]) ⇒ object

Returns an order object containing the product from the getProduct() method, usedFonts from getUsedFonts() and usedColors from getUsedColors().

Kind: global function
Returns: object - An object containing different objects representing important order data.

ParamTypeDefaultDescription
[options]Object{}Options for the methods that are called inside this mehtod, e.g. getProduct() can receive two parameters.

Example

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

getPrintOrderData()

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.

Kind: global function

calculatePrice([considerQuantity]) ⇒ Number

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

Kind: global function
Returns: Number - The calculated price.

ParamTypeDefaultDescription
[considerQuantity]BooleantrueCalculate with or without quantity.

"ready" (event)

Gets fired as soon as product designer is ready, e.g. to make any method call.

Kind: event emitted

ParamType
eventCustomEvent

"productsSet" (event)

Gets fired as soon as products are set.

Kind: event emitted

ParamType
eventCustomEvent

"designsSet" (event)

Gets fired as soon as the designs are set.

Kind: event emitted

ParamType
eventCustomEvent

"productAdd" (event)

Gets fired when a product is added.

Kind: event emitted

ParamTypeDescription
eventCustomEvent
event.detail.viewsArrayThe product views.
event.detail.categoryStringThe category title.
event.detail.catIndexNumberThe index of the category.

"productSelect" (event)

Gets fired when a product is selected.

Kind: event emitted

ParamTypeDescription
eventCustomEvent
event.detail.productObjectAn object containing the product (views).

"beforeElementAdd" (event, element)

Gets fired when an element is added.

Kind: event emitted

ParamType
eventEvent
elementfabric.Object

"elementAdd" (event, element)

Gets fired when an element is added.

Kind: event emitted

ParamType
eventEvent
elementfabric.Object

"elementRemove" (event, element)

Gets fired as soon as an element has been removed.

Kind: event emitted

ParamTypeDescription
eventEvent
elementfabric.ObjectThe fabric object that has been removed.

"elementSelect" (event)

Gets fired when an element is selected.

Kind: event emitted

ParamType
eventEvent

"elementFillChange" (event, element, hex, colorLinking)

Gets fired when the color of an element is changed.

Kind: event emitted

ParamTypeDescription
eventEvent
elementfabric.Object
hexStringHexadecimal color string.
colorLinkingBooleanColor of element is linked to other colors.

"elementModify" (event)

Gets fired when an element is modified.

Kind: event emitted

ParamTypeDescription
eventCustomEvent
event.detail.optionsObjectAb object containing the modified options(parameters).
event.detail.elementfabric.ObjectThe modified element.

"productCreate" (event)

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

Kind: event emitted

ParamType
eventEvent

"historyAction" (event)

Gets fired as soon as any action for canvas history is executed.

Kind: event emitted

ParamType
eventEvent

"viewCreate" (event, viewInstance)

Gets fired when a view is created.

Kind: event emitted

ParamType
eventEvent
viewInstanceFancyProductDesignerView

"imageDPIWarningOn" (event)

Gets fired when the DPI of an image is below the minDPI and the warning is shown.

Kind: event emitted

ParamType
eventEvent

"imageDPIWarningOff" (event)

Gets fired when the DPI of an image is in range.

Kind: event emitted

ParamType
eventEvent

"viewSelect" (event)

Gets fired as soon as a view has been selected.

Kind: event emitted

ParamType
eventEvent

"clear" (event)

Gets fired as soon as the stage has been cleared.

Kind: event emitted

ParamType
eventEvent

"viewRemove" (event)

Gets fired when a view is removed.

Kind: event emitted

ParamType
eventEvent

"getOrder" (event)

Gets fired before the data of getOrder is returned. Useful to manipulate order data.

Kind: event emitted

ParamType
eventEvent

"priceChange" (event)

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

Kind: event emitted

ParamType
eventEvent