Options.defaults Class

Show:

actions

Object

An object defining the available actions in the different zones.


Default: {'top': [], 'right': [], 'bottom': [], 'left': []}

Example:

                  
{'top': ['manage-layers'], 'right': ['info'], 'bottom': ['undo', 'redo'], 'left': []}

allowedImageTypes

Array

Defines the image types in lowercase that can be uploaded. Currently the designer supports jpg, svg and png images.


Default: []

applyFillWhenReplacing

Boolean

When an element is replaced, apply fill(color) from replaced element to added element.


Default: true

autoOpenInfo

Boolean

Open the Info modal when product designer is loaded. The Info action needs to be added to show the modal.


Default: false

boundingBoxColor

String

The border color of the bounding box.


Default: '#005ede'

boundingBoxProps

Object

Addtional properties for the bounding box. Can be used to set the stroke width etc.. See http://fabricjs.com/docs/fabric.Rect.html


Default: {strokeWidth: 1}

bulkVariations

Object

The available variations for the Bulk-Add Variations Form, e.g.: {'Size': ['XL', 'L', 'M', 'S'], 'Color': ['Red', 'Blue']}. Requires Fancy Product Designer Plus Add-On.


Default: {}

bulkVariationsPlacement

String

Sets the placement for the Bulk-Add Variations Form. Just enter ID or class of another element(#my-color-selection). Requires Fancy Product Designer Plus Add-On.


Default: ''

colorPickerPalette

Array

The color palette when the color wheel is displayed.


Default: []

Example:

                  
['#000', '#fff']

colorSelectionDisplayType

String

Sets the display type for the color selection. By default the color items will be shown in a grid. You can also enable a dropdown for the color selection, but this is only working when using a custom element in colorSelectionPlacement. Possible values: grid, dropdown. Requires Fancy Product Designer Plus Add-On.


Default: 'list'

colorSelectionPlacement

String

Sets the placement for the color selection, possible values: 'inside-tl', 'inside-tc', 'inside-tr', 'inside-bl', 'inside-bc', 'inside-br' or ID of another element(#my-color-selection). Requires Fancy Product Designer Plus Add-On.


Default: ''

cornerIconColor

String

Hex color value defining the color for the corner icon controls.


Default: '#000000'

customAdds

Object

An object containing the supported media types the user can add in the product designer.

customImageAjaxSettings

Object

An object that contains the settings for the AJAX post when a custom added image is added to the canvas (Uploaded Images, Facebook/Instagram Photos). This allows to send the URL of the image to a custom-built script, that returns the data URI of the image or uploads the image to your server and returns the new URL on your server. By default the URL is send to php/custom-image-handler.php. See the official jQuery.ajax documentation for more information. The data object has a reserved property called url, which is the image URL that will send to the script. The success function is also reserved.

Example:

                  
 customImageAjaxSettings: {
  url: 'src/php/custom-image-handler.php',
  data: {
   saveOnServer: 1, //image is uploaded to your server 
   uploadsDir: '/path/to/uploads_dir', //into this directory 
   uploadsDirURL: 'http://yourdomain.com/uploads_dir' //and returns the new URL from this location 
}}

customImageParameters

Object

An object containing the default parameters for custom added images. See Options.defaults.customImageParameters. The properties in the object will merge with the properties in the elementParameters and imageParameters.

customTextParameters

Object

An object containing additional parameters for custom added text.The properties in the object will merge with the properties in the elementParameters and textParameters.

depositphotosApiKey

String

To add photos from DepositPhotos, you have to set an Pixabay API key.


Default: ''

depositphotosLang

String

The language shortcut that defines the language for the category titles. Available language shortcuts: en,de,fr,sp,ru,it,pt,es,pl,nl,jp,cz,se,zh,tr,mx,gr,ko,br,hu,uk,ro,id,th.


Default: 'en'

depositphotosPrice

Number

The price that is charged when adding an image from depositphotos.com.


Default: 0

deselectActiveOnOutside

Boolean

Deselect active element when clicking outside of the product designer.


Default: true

designCategories

Array

An array of design category titles (only top-level categories) to enable particular design categories for an upload zone or for the view. An empty array will enable all design categories.


Default: []

disableTextEmojis

Boolean

Emojis in text elements will be removed when changing or adding text.


Default: false

dynamicViewsOptions

Object

Options for the Dynamic Views modul. Requires Fancy Product Designer Plus Add-On.


Default: {}

editorBoxParameters

Array

The properties that will be displayed in the editor box when an element is selected.


Default: ['left', 'top', 'angle', 'fill', 'width', 'height', 'fontSize', 'price']

editorMode

Boolean

Enables the editor mode, which will add a helper box underneath the product designer with some options of the current selected element.


Default: false

elementParameters

Object

An object containing the default element parameters in addition to the default Fabric Object properties. See Options.defaults.elementParameters.

fabricCanvasOptions

Object

An object containing options for the fabricjs canvas.


Default: {}

facebookAppId

String

To add photos from Facebook, you have to set your own Facebook API key.


Default: ''

fitImagesInCanvas

Boolean

If the image (custom uploaded or design) is larger than the canvas, it will be scaled down to fit into the canvas.


Default: false

fonts

Aarray

An array containing all available fonts.
Since V4.3 you can use TrueType fonts (ttf), which is also recommend. TrueType fonts are required to include the font in the PDF for Fancy Product Designer - Admin, see example.


Default: [{name: 'Arial'}, {name: 'Lobster', url: 'google'}]

Example:

                  
since V4.3 set font like this
[{name: "Lobster", url: "google"}, {name: 'Custom', url: 'https://yourdomain.com/fonts/custom.ttf"}]

gridColumns

Number

The number of columns used for the grid images in the images and designs module.


Default: 2

guidedTour

Null | Object

Create a custom guided tour by definifing an object with a key/css selector for the target element and the value for the text in the guided tour step. The first part of the key string defines the target type (module or action) followed by a a colon and the name of the module/action or just enter a custom CSS selector string, e.g. module:products, action:manage-layers or #any-element.


Default: null

Example:

                  
guidedTour: {
  "module:products": "This is the text for first step.",
  "action:manage-layers": "This is the text for second step.",
  "#any-element": "Pointer on a custom HTML element"
  }

hexNames

Object

Set custom names for your hexdecimal colors. key=hexcode without #, value: name of the color.


Default: {}

Example:

                  
hexNames: {000000: 'dark',ffffff: 'white'}

hideDialogOnAdd

Boolean

If the user adds something and off-canvas panel or dialog is opened, it will be closed.


Default: false

highlightEditableObjects

String

Highlight objects (editable texts and upload zones) with a dashed border. To enable this just define a hexadecimal color value.


Default: ''

imageEditorSettings

Object

An object containing the settings for the image editor.


Default: {masks: []}

imageParameters

Object

An object containing the default image element parameters in addition to the default Fabric Image properties. See Options.defaults.imageParameters. The properties in the object will merge with the properties in the elementParameters.

imageSizeTooltip

Boolean

Shows the current image size in pixels in a tooltip above the image element when its selected.


Default: false

improvedResizeQuality

Boolean

Enable an improved resize filter, that may improve the image quality when its resized.


Default: false

inCanvasTextEditing

Boolean

The text can be edited in the canvas by double click/tap.


Default: true

initialActiveModule

String

Set the initial active module.


Default: ''

instagramClientId

String

To add photos from Instagram, you have to set an Instagram client ID.


Default: ''

instagramRedirectUri

String

This URI to the html/instagram_auth.html. You have to update this option if you are using a different folder structure.


Default: ''

keyboardControl

Boolean

Enable keyboard control. Use arrow keys to move and backspace key to delete selected element.


Default: true

langJSON

String | Object | Boolean

The URL to the JSON file or an object containing all content from the JSON file. Set to false, if you do not need it.


Default: 'lang/default.json'

layouts

Array

An array containing layouts. A layout is technically a view that will replace all elements in a view when selected.


Default: []

lazyLoad

Boolean

If true lazy load will be used for the images in the "Designs" module and "Change Product" module.


Default: true

loadFirstProductInStage

Boolean

Loads the first initial product into stage.


Default: true

mainBarContainer

Boolean | String

The ID of an element that will be used as container for the main bar.


Default: false

Example:

                  
#customMainBarContainer

mainBarModules

Array

An array defining the available modules in the main bar. Possible values: 'products', 'images', 'text', 'designs'. 'names-numbers', 'drawing' requires Fancy Product Designer Plus Add-On.


Default: ['products', 'images', 'text', 'designs']

maxPrice

Number

Set a maximum price for all products or for specific views. -1 disables the max. price.


Default: -1

maxValues

String

An object defining the maximum values for input elements in the toolbar.


Default: {}

maxZoom

Number

The maximal zoom factor. Set it to 1 to hide the zoom feature in the user interface.


Default: 3

modalMode

Boolean | String

The ID of an element that will be used to open the modal, in which the designer is included.


Default: false

Example:

                  
#modalButton

namesNumbersDropdown

Array

Defines the values for the select element in the names & numbers module. Requires Fancy Product Designer Plus Add-On.


Default: []

namesNumbersEntryPrice

Number

Sets price for any extra entry in the names & numbers module. Requires Fancy Product Designer Plus Add-On.


Default: 0

openModalInDesigner

Boolean

Display the internal modals (info, qr-code etc.) in the product designer instead in the whole page.


Default: false

openTextInputOnSelect

Boolean

The text input in the toolbar when be opened when an editable text is selected.


Default: false

optionalView

Boolean

Will make the view(s) optional, so the user have to unlock it. The price for the elements in the view will be added to the total product price as soon as the view is unlocked.


Default: false

outOfBoundaryColor

String

The border color of the element when its outside of his bounding box.


Default: '#990000'

pixabayApiKey

String

To add photos from Pixabay, you have to set an Pixabay API key.


Default: ''

pixabayHighResImages

Boolean

If you want to access high-resolution images, enable this option and you have to ask Pixabay for permission. You can easily do that here, next to the headline.


Default: false

pixabayLang

String

Language code of the language to be searched in. Accepted values: cs, da, de, en, es, fr, id, it, hu, nl, no, pl, pt, ro, sk, fi, sv, tr, vi, th, bg, ru, el, ja, ko, zh.


Default: ''

priceFormat

Object

An object containing the currency string(use %d as placeholder for price), decimal separator and thousand separator.


Default: {currency: '$%d', decimalSep: '.', thousandSep: ','}

pricingRules

Array

An array containing the pricing rules groups. Use the online tool to generate pricing rules. Requires Fancy Product Designer Pricing Add-On.


Default: []

printingBox

Object

An object defining the printing area when exporting the product as SVG. {top: Number, left: Number, width: Number, height: Number, visibility: Boolean}. The visibility property shows the printing box to the customers.


Default: {}

Example:

                  
{top: 100, left: 100, width: 400, height: 500, visibility: true}

qrCodeProps

Object

An object containing the properties (parameters) for the QR code.

replaceColorsInColorGroup

Boolean

As soon as an element with a color link group is added, the colours of this element will be used for the color group. If false, the colours of all element in the color group will be concatenated.


Default: false

replaceInitialElements

Boolean

If true only the initial elements will be replaced when changing the product. Custom added elements will not be removed.


Default: false

responsive

Boolean

Make the canvas and the elements in the canvas responsive.


Default: true

saveActionBrowserStorage

Boolean

When using the save/load actions, store the product in user's browser storage.


Default: true

selectedColor

String

The border color of the selected element.


Default: '#d5d5d5'

smartGuides

Boolean

Enable guide lines to align the selected object to the edges of the other objects.


Default: false

snapGridSize

Array

The grid size for snap action. First value defines the width on the a-axis, the second on the y-axis.


Default: [50, 50]

stageHeight

Number

The stage(canvas) height for the product designer.


Default: "600"

stageWidth

Number

The stage(canvas) width for the product designer.


Default: "900"

templatesDirectory

String

The directory path that contains the templates.


Default: 'templates/'

templatesType

String

Defines the file type used for the templates. E.g. if you want to convert all template files (productdesigner.html and canvaserror.html) into PHP files, you need to change this option to 'php'.


Default: 'html'

textParameters

Object

An object containing the default text element parameters in addition to the default Fabric IText properties. See Options.defaults.textParameters. The properties in the object will merge with the properties in the elementParameters.

toolbarDynamicContext

String

The element where the toolbar will be appended when toolbarPlacement='dynamic'.


Default: 'body'

toolbarPlacement

String

Set the placement of the toolbar. For smartphones the toolbar will be fixed at the bottom of the page. Possible values: 'dynamic' (deprecated), 'inside-bottom', 'inside-top', 'smart'


Default: 'smart'

toolbarTheme

String

Set the toolbar theme. Possible values: white, dark.


Default: 'white'

unsavedProductAlert

Boolean

If the user leaves the page without saving the product or the getProduct() method is not, a alert window will pop up.


Default: false

uploadAgreementModal

Boolean

Enables an agreement modal that needs to be confirmed before uploaded images can be used in the product designer. The text in the agreement modal can be set through the language JSON.


Default: false

uploadZonesTopped

Boolean

All upload zones will be always on top of all elements.


Default: true

usePrintingBoxAsBounding

Boolean

If a printing box has been defined for a view and the element has no individual bounding box, the printing box will be used as bounding box.


Default: false

watermark

Boolean | String

Set a watermark image when the user downloads/prints the product via the actions. To pass a watermark, just enter a string with an image URL.


Default: false

zoomStep

Number

The zoom step when using the UI slider to change the zoom level.


Default: 0.2