Options.defaults Class
Properties
- actions
- allowedImageTypes
- applyFillWhenReplacing
- autoOpenInfo
- boundingBoxColor
- boundingBoxProps
- bulkVariations
- bulkVariationsPlacement
- colorPickerPalette
- colorSelectionDisplayType
- colorSelectionPlacement
- cornerControlsStyle
- cornerIconColor
- customAdds
- customImageAjaxSettings
- customImageParameters
- customizationRequiredRule
- customTextParameters
- depositphotosApiKey
- depositphotosLang
- depositphotosPrice
- deselectActiveOnOutside
- designCategories
- designsJSON
- disableTextEmojis
- downloadFilename
- dynamicViewsOptions
- editorBoxParameters
- editorMode
- elementParameters
- fabricCanvasOptions
- facebookAppId
- fitImagesInCanvas
- fonts
- gridColumns
- guidedTour
- hexNames
- hideDialogOnAdd
- highlightEditableObjects
- imageEditorSettings
- imageParameters
- imageQualityRatings
- imageSizeTooltip
- improvedResizeQuality
- inCanvasTextEditing
- initialActiveModule
- instagramClientId
- instagramRedirectUri
- instagramTokenUri
- keyboardControl
- langJSON
- layouts
- lazyLoad
- loadFirstProductInStage
- mainBarContainer
- mainBarModules
- maxCanvasHeight
- maxPrice
- maxValues
- maxZoom
- mobileGesturesBehaviour
- modalMode
- multiSelection
- namesNumbersDropdown
- namesNumbersEntryPrice
- openModalInDesigner
- openTextInputOnSelect
- optionalView
- outOfBoundaryColor
- pixabayApiKey
- pixabayHighResImages
- pixabayLang
- priceFormat
- pricingRules
- printingBox
- productsJSON
- qrCodeProps
- replaceColorsInColorGroup
- replaceInitialElements
- responsive
- saveActionBrowserStorage
- selectedColor
- setTextboxWidth
- smartGuides
- snapGridSize
- splitMultiSVG
- stageHeight
- stageWidth
- swapProductConfirmation
- templatesDirectory
- templatesType
- textLinkGroupProps
- textParameters
- textTemplates
- toolbarDynamicContext
- toolbarPlacement
- toolbarTextareaPosition
- toolbarTheme
- uiTheme
- unsavedProductAlert
- uploadAgreementModal
- uploadZonesTopped
- usePrintingBoxAsBounding
- watermark
- zoomStep
actions
ObjectAn 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
ArrayDefines the image types in lowercase that can be uploaded. Currently the designer supports jpg, svg, png images and PDF files.
Default: ['jpeg', 'png', 'svg', 'pdf']
applyFillWhenReplacing
BooleanWhen an element is replaced, apply fill(color) from replaced element to added element.
Default: true
autoOpenInfo
BooleanOpen the Info modal when product designer is loaded. The Info action needs to be added to show the modal.
Default: false
boundingBoxProps
ObjectAddtional 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
ObjectThe 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
StringSets 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
ArrayThe color palette when the color wheel is displayed.
Default: []
Example:
['#000', '#fff']
colorSelectionDisplayType
StringSets 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: 'grid'
colorSelectionPlacement
StringSets 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: ''
cornerControlsStyle
BooleanSet corner controls style: Basic (Rescale and Rotate), Advanced (Rescale, Rotate, Delete, Duplicate).
Default: false
cornerIconColor
StringHex color value defining the color for the corner icon controls.
Default: '#000000'
customAdds
ObjectAn object containing the supported media types the user can add in the product designer.
customImageAjaxSettings
ObjectAn 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
ObjectAn 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.
customizationRequiredRule
StringWhen the customizationRequired argument in the getProduct is set to true, you can control if any view needs to be customized or all. Possible values: any, all.
Default: 'any'
customTextParameters
ObjectAn object containing additional parameters for custom added text.The properties in the object will merge with the properties in the elementParameters and textParameters.
depositphotosApiKey
StringTo add photos from DepositPhotos, you have to set an Pixabay API key.
Default: ''
depositphotosLang
StringThe 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
NumberThe price that is charged when adding an image from depositphotos.com.
Default: 0
deselectActiveOnOutside
BooleanDeselect active element when clicking outside of the product designer.
Default: true
designCategories
ArrayAn 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: []
designsJSON
StringA JSON object or URL to a JSON file that stores all designs. These designs will be displayed in the Designs module.
Default: null
disableTextEmojis
BooleanEmojis in text elements will be removed when changing or adding text.
Default: false
downloadFilename
StringThe filename when the user downloads the product design as image or PDF.
Default: 'Product'
dynamicViewsOptions
ObjectOptions for the Dynamic Views modul. Requires Fancy Product Designer Plus Add-On.
Default: {}
editorBoxParameters
ArrayThe properties that will be displayed in the editor box when an element is selected.
Default: ['left', 'top', 'angle', 'fill', 'width', 'height', 'fontSize', 'price']
editorMode
BooleanEnables the editor mode, which will add a helper box underneath the product designer with some options of the current selected element.
Default: false
elementParameters
ObjectAn object containing the default element parameters in addition to the default Fabric Object properties. See Options.defaults.elementParameters.
facebookAppId
StringTo add photos from Facebook, you have to set your own Facebook API key.
Default: ''
fitImagesInCanvas
BooleanIf the image (custom uploaded or design) is larger than the canvas, it will be scaled down to fit into the canvas.
Default: false
fonts
AarrayAn 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:
[{name: "Lobster", url: "google"}, {name: 'Custom', url: 'https://yourdomain.com/fonts/custom.ttf"}, {name: 'Aller', url: 'path/Aller.ttf', variants: {'n7': 'path/Aller__bold.ttf','i4': 'path/Aller__italic.ttf','i7': 'path/Aller__bolditalic.ttf'}}]
gridColumns
NumberThe number of columns used for the grid images in the images and designs module.
Default: 2
guidedTour
Null | ObjectCreate 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
ObjectSet custom names for your hexdecimal colors. key=hexcode without #, value: name of the color.
Default: {}
Example:
hexNames: {000000: 'dark',ffffff: 'white'}
hideDialogOnAdd
BooleanIf the user adds something and off-canvas panel or dialog is opened, it will be closed.
Default: true
highlightEditableObjects
StringHighlight objects (editable texts and upload zones) with a dashed border. To enable this just define a hexadecimal color value.
Default: ''
imageEditorSettings
ObjectAn object containing the settings for the image editor.
Default: {masks: []}
imageParameters
ObjectAn 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.
imageQualityRatings
ObjectEnable image quality ratings for uploaded images. Therefore you can define low, mid and high quality steps. The object receives low, mid and high keys. The values of these keys are arrays, where the first entry defines the width and the second entry defines the height.
Default: null
Example:
{low: [100, 200], mid: [500, 600], high: [1000, 1200]}
imageSizeTooltip
BooleanShows the current image size in pixels in a tooltip above the image element when its selected.
Default: false
improvedResizeQuality
BooleanEnable an improved resize filter, that may improve the image quality when its resized.
Default: false
instagramClientId
StringTo add photos from Instagram, you have to set an Instagram client ID.
Default: ''
instagramRedirectUri
StringThis URI to the html/instagram_auth.html. You have to update this option if you are using a different folder structure.
Default: ''
instagramTokenUri
StringThe URI to the script that get the access token from Instagram. You need the enter the Instagram Secret ID.
Default: ''
keyboardControl
BooleanEnable keyboard control. Use arrow keys to move and backspace key to delete selected element.
Default: true
langJSON
String | Object | BooleanThe 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
ArrayAn array containing layouts. A layout is technically a view that will replace all elements in a view when selected.
Default: []
lazyLoad
BooleanIf true lazy load will be used for the images in the "Designs" module and "Change Product" module.
Default: true
mainBarContainer
Boolean | StringThe ID of an element that will be used as container for the main bar.
Default: false
Example:
#customMainBarContainer
mainBarModules
ArrayAn 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']
maxCanvasHeight
NumberThe maximum canvas height related to the window height. A number between 0 and 1, e.g. 0.8 will set a maximum canvas height of 80% of the window height. A value of 1 will disable a calculation of a max. height.
Default: 1
maxPrice
NumberSet a maximum price for all products or for specific views. -1 disables the max. price.
Default: -1
maxValues
StringAn object defining the maximum values for input elements in the toolbar.
Default: {}
maxZoom
NumberThe maximal zoom factor. Set it to 1 to hide the zoom feature in the user interface.
Default: 3
mobileGesturesBehaviour
StringSet the behaviour for mobile gestures. Possible values:
- 'none': No behaviour
- 'pinchPanCanvas': Zoom in/out and pan canvas
- 'pinchImageScale': Scale selected image with pinch
Default: 'none'
modalMode
Boolean | StringThe ID of an element that will be used to open the modal, in which the designer is included.
Default: false
Example:
#modalButton
namesNumbersDropdown
ArrayDefines the values for the select element in the names & numbers module. Requires Fancy Product Designer Plus Add-On.
Default: []
namesNumbersEntryPrice
NumberSets price for any extra entry in the names & numbers module. Requires Fancy Product Designer Plus Add-On.
Default: 0
openModalInDesigner
BooleanDisplay the internal modals (info, qr-code etc.) in the product designer instead in the whole page.
Default: false
openTextInputOnSelect
BooleanThe text input in the toolbar when be opened when an editable text is selected.
Default: false
optionalView
BooleanWill 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
StringThe border color of the element when its outside of his bounding box.
Default: '#990000'
pixabayHighResImages
BooleanIf 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
StringLanguage 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
ObjectAn object containing the currency string(use %d as placeholder for price), decimal separator and thousand separator.
Default: {currency: '$%d', decimalSep: '.', thousandSep: ','}
pricingRules
ArrayAn array containing the pricing rules groups. Use the online tool to generate pricing rules. Requires Fancy Product Designer Pricing Add-On.
Default: []
printingBox
ObjectAn 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}
productsJSON
StringA JSON object or URL to a JSON file that stores all initial products. These products will be displayed in the Products module.
Default: null
replaceColorsInColorGroup
BooleanAs 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
BooleanIf true only the initial elements will be replaced when changing the product. Custom added elements will not be removed.
Default: false
saveActionBrowserStorage
BooleanWhen using the save/load actions, store the product in user's browser storage.
Default: true
setTextboxWidth
BooleanThe width of a textbox can set via the "Texts" module or changed via the corner controls of the selected textbox.
Default: false
smartGuides
BooleanEnable guide lines to align the selected object to the edges of the other objects.
Default: false
snapGridSize
ArrayThe grid size for snap action. First value defines the width on the a-axis, the second on the y-axis.
Default: [50, 50]
swapProductConfirmation
BooleanDisplay the notification that the product is going to be changed when clicking on a product item in the Products module.
Default: false
templatesType
StringDefines 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'
textLinkGroupProps
ArrayDefine additional properties that will be applied to all text elements in the same textLinkGroup. E.g.: ['fontFamily', 'fontSize', 'fontStyle']
Default: []
textParameters
ObjectAn 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.
textTemplates
ArrayText Templates that will appear in the Text module.
Default: []
Example:
[{text: 'Hello World', properties: {fontFamily: 'Arial', textSize: 35}}]
toolbarDynamicContext
StringThe element where the toolbar will be appended when toolbarPlacement='smart'.
Default: 'body'
toolbarPlacement
StringSet the placement of the toolbar. For smartphones the toolbar will be fixed at the bottom of the page. Possible values:'smart', 'inside-bottom', 'inside-top'
Default: 'smart'
toolbarTextareaPosition
StringThe position of the textarea in the toolbar. Possible values: sub, top (Only possible when toolbarPlacement = smart).
Default: 'sub'
uiTheme
StringThe UI theme that you would like to use. Choose between 'flat' or 'doyle'.
Default: 'flat'
unsavedProductAlert
BooleanIf the user leaves the page without saving the product or the getProduct() method is not, a alert window will pop up.
Default: false
uploadAgreementModal
BooleanEnables 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
usePrintingBoxAsBounding
BooleanIf 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