FancyProductDesigner
Classes
- FancyProductDesigner ⇐
EventTarget
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.
- "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, elementPrice)
Gets fired as soon as the price changes in a view.
FancyProductDesigner ⇐ EventTarget
Kind: global class
Extends: EventTarget
- FancyProductDesigner ⇐
EventTarget- new FancyProductDesigner(elem, [opts])
- static
- .additionalModules :
Object
- .additionalModules :
- inner
- ~container :
HTMLElement - ~mainOptions :
Object - ~currentViewInstance :
FancyProductDesignerView - ~currentViewIndex :
Number - ~products :
Array - ~designs :
Array - ~modalContainer :
HTMLElement - ~currentCategoryIndex :
Number - ~currentProductIndex :
Number - ~viewInstances :
Array - ~productViews :
Array - ~currentElement :
fabric.Object - ~productCreated :
Boolean - ~colorLinkGroups :
Object - ~globalCustomElements :
Array - ~doUnsavedAlert :
Boolean - ~currentPrice :
Number - ~singleProductPrice :
Number - ~pricingRulesPrice :
Number
- ~container :
new FancyProductDesigner(elem, [opts])
Creates a new FancyProductDesigner.
| Param | Type | Default | Description |
|---|---|---|---|
| elem | HTMLElement | The 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
| Param | Type | Description |
|---|---|---|
| designs | Array | An array containg the categories with designs. |
addProduct(views, [category])
Adds a new product to the product designer.
Kind: global function
| Param | Type | Description |
|---|---|---|
| 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 | If 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
| Param | Type | Default | Description |
|---|---|---|---|
| views | array | An array containing the views for the product. | |
| [onlyReplaceInitialElements] | Boolean | false | If true, the initial elements will be replaced. Custom added elements will stay on the canvas. |
| [mergeMainOptions] | Boolean | false | Merges the main options into every view options. |
addView(view)
Adds a view to the current visible product.
Kind: global function
| Param | Type | Description |
|---|---|---|
| view | object | An 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
| Param | Type | Description |
|---|---|---|
| index | number | The 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.
| Param | Type | Default | Description |
|---|---|---|---|
| [viewIndex] | Number | -1 | The 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] | String | true | Deselect 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.
| Param | Type | Default | Description |
|---|---|---|---|
| [type] | string | "'all'" | The type of elements. Possible values: 'all', 'image', 'text'. |
| [viewIndex] | Number | -1 | The index of the target view. By default all views are target. |
| [deselectElement] | String | true | Deselect 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.
| Param | Type | Default | Description |
|---|---|---|---|
| [type] | string | "'all'" | The type of elements. Possible values: 'all', 'image', 'text'. |
| [viewIndex] | Number | -1 | The index of the target view. By default all views are target. |
| [deselectElement] | String | true | Deselect 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
| Param | Type | Description |
|---|---|---|
| source | string | The URL of the image. |
| title | string | The title for the design. |
| options | Object | Additional options. |
| [viewIndex] | number | 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. |
toggleResponsive([toggle]) ⇒ Boolean
Toggle the responsive behavior.
Kind: global function
Returns: Boolean - Returns true or false.
| Param | Type | Description |
|---|---|---|
| [toggle] | Boolean | True 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.
| Param | Type | Default | Description |
|---|---|---|---|
| [onlyEditableElements] | boolean | false | If true, only the editable elements will be returned. |
| [customizationRequired] | boolean | false | To 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
| Param | Type | Default | Description |
|---|---|---|---|
| callback | function | A function that will be called when the data URL is created. The function receives the data URL. | |
| [options] | Object | See 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.
| Param | Type | Description |
|---|---|---|
| callback | function | A function that will be called when the data URL is created. The function receives the data URL. |
| [options] | string | See 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.
| Param | Type | Description |
|---|---|---|
| options | Object | See 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.
| Param | Type | Default | Description |
|---|---|---|---|
| [viewIndex] | Number | -1 | The 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
| Param | Type | Default | Description |
|---|---|---|---|
| [viewIndex] | Number | 0 | The index of the target view. |
setOrderQuantity(quantity)
Sets the order quantity.
Kind: global function
| Param | Type | Description |
|---|---|---|
| quantity | Number | The 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.
| Param | Type | Default | Description |
|---|---|---|---|
| [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.
| Param | Type | Default | Description |
|---|---|---|---|
| [considerQuantity] | Boolean | true | Calculate 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
| Param | Type |
|---|---|
| event | CustomEvent |
"productsSet" (event)
Gets fired as soon as products are set.
Kind: event emitted
| Param | Type |
|---|---|
| event | CustomEvent |
"designsSet" (event)
Gets fired as soon as the designs are set.
Kind: event emitted
| Param | Type |
|---|---|
| event | CustomEvent |
"productAdd" (event)
Gets fired when a product is added.
Kind: event emitted
| Param | Type | Description |
|---|---|---|
| event | CustomEvent | |
| event.detail.views | Array | The product views. |
| event.detail.category | String | The category title. |
| event.detail.catIndex | Number | The index of the category. |
"productSelect" (event)
Gets fired when a product is selected.
Kind: event emitted
| Param | Type | Description |
|---|---|---|
| event | CustomEvent | |
| event.detail.product | Object | An object containing the product (views). |
"beforeElementAdd" (event, element)
Gets fired when an element is added.
Kind: event emitted
| Param | Type |
|---|---|
| event | Event |
| element | fabric.Object |
"elementAdd" (event, element)
Gets fired when an element is added.
Kind: event emitted
| Param | Type |
|---|---|
| event | Event |
| element | fabric.Object |
"elementRemove" (event, element)
Gets fired as soon as an element has been removed.
Kind: event emitted
| Param | Type | Description |
|---|---|---|
| event | Event | |
| element | fabric.Object | The fabric object that has been removed. |
"elementSelect" (event)
Gets fired when an element is selected.
Kind: event emitted
| Param | Type |
|---|---|
| event | Event |
"elementFillChange" (event, element, hex, colorLinking)
Gets fired when the color of an element is changed.
Kind: event emitted
| Param | Type | Description |
|---|---|---|
| event | Event | |
| element | fabric.Object | |
| hex | String | Hexadecimal color string. |
| colorLinking | Boolean | Color of element is linked to other colors. |
"elementModify" (event)
Gets fired when an element is modified.
Kind: event emitted
| Param | Type | Description |
|---|---|---|
| event | CustomEvent | |
| event.detail.options | Object | Ab object containing the modified options(parameters). |
| event.detail.element | fabric.Object | The modified element. |
"productCreate" (event)
Gets fired as soon as a product has been fully added to the designer.
Kind: event emitted
| Param | Type |
|---|---|
| event | Event |
"historyAction" (event)
Gets fired as soon as any action for canvas history is executed.
Kind: event emitted
| Param | Type |
|---|---|
| event | Event |
"viewCreate" (event, viewInstance)
Gets fired when a view is created.
Kind: event emitted
| Param | Type |
|---|---|
| event | Event |
| viewInstance | FancyProductDesignerView |
"viewSelect" (event)
Gets fired as soon as a view has been selected.
Kind: event emitted
| Param | Type |
|---|---|
| event | Event |
"clear" (event)
Gets fired as soon as the stage has been cleared.
Kind: event emitted
| Param | Type |
|---|---|
| event | Event |
"viewRemove" (event)
Gets fired when a view is removed.
Kind: event emitted
| Param | Type |
|---|---|
| event | Event |
"getOrder" (event)
Gets fired before the data of getOrder is returned. Useful to manipulate order data.
Kind: event emitted
| Param | Type |
|---|---|
| event | Event |
"priceChange" (event, elementPrice)
Gets fired as soon as the price changes in a view.
Kind: event emitted
| Param | Type | Description |
|---|---|---|
| event | Event | |
| elementPrice | number | The price of the element. |