Overview A cool jQuery plugin for creating own product designers easily.
Working with png/jpg files
You create your products with png and/or jpg image files. You do not need to upload any vector files.For any type of product
Use the plugin for any type of product. You can use it as T-Shirt Designer, Postcard Designer, Bottle Designer and much more...Add designs
Let the user create their products with an own sidebar for adding different designs to a product.Colorizable elements
You decide which elements can be colorizable by the users. You can set static color values or enable the colorpicker.Transformable elements
You can adjust every element if its can be resized, removed, rotated or moved (optional bounding box).Great API
The plugin comes with a great API, which returns amongst other things the current product with all elements.Examples See some product designers in action and how the plugin can be used.
Clothing Designer
In this example you see the plugin used as Clothing Designer. The Checkout, Print buttons are binded with the API of the plugin. Prices are also used and with the getPrice()
method and the priceChange
event, you can get the current price and output it in a custom HTML element.













































Output - only the editable elements:
Javascript Code:
var thsirtDesigner = $('#clothing-designer').fancyProductDesigner({ fonts: ['Arial', 'Fearless', 'Destroy', 'Helvetica', 'Times New Roman', 'Verdana', 'Geneva'], customTextParamters: {x: 210, y: 250, colors: "#000000", removable: true, resizable: true, draggable: true, rotatable: true} }).data('fancy-product-designer'); $('#print-button').click(function(){ thsirtDesigner.print(); return false; }); $('#checkout-button').click(function(){ thsirtDesigner.getProduct(true); //see output panel return false; }); $('#clothing-designer') .bind('productCreate', function(evt){ $('#thsirt-output').html('Click the "Checkout" button to see the returning object with all properties.'); $('#thsirt-price').text(thsirtDesigner.getPrice()); }) .bind('priceChange', function(evt, price, currentPrice) { $('#thsirt-price').text(currentPrice); });
Ipod Designer
In this example the design bar is hidden, because no designs are set for this designer. Every logo has also a bounding box and you can enter an own name on the back of the Ipod.










Javascript Code:
var ipodDesigner = $('#ipod-designer').fancyProductDesigner({ customTexts: false }).data('fancy-product-designer');
Business Card Designer
Here is the editor box enabled, which can be very helpful when setting up your product designers. You can see the current position and dimension of the selected element in this box and copy the values in your HTML document. Each text element has also a bounding box.








Javascript Code:
var ipodDesigner = $('#businnescard-designer').fancyProductDesigner({ editorMode: true, customTexts: false }).data('fancy-product-designer');
Basic Setup
All the images and texts for your products will be set in adiv
.The
.fpd-product
elements can hold img
and span
elements. You set the different parameters in a data-parameters
attribute.
Basic HTML Setup
<div id="fpd"> <div class="fpd-product" title="TITLE" data-thumbnail="PREVIEW.png"> <img src="URL_OF_THE_IMAGE.png" title="TITLE_FOR_IMAGE" data-parameters='{"x": 100, "y": 200, "colors": "#D5D5D5", "price": 20}' /> <span title="TITLE_FOR_TEXT" data-parameters='{"x": 150, "y": 250, "removable": true, "draggable": true, "rotatable": true, "resizable": true, "colors": "#000000,#ffffff,#990000"}' >Default Text</span> </div> <!-- Here you can add more product divs --> <div class="fpd-design"> <img src="URL_OF_THE_IMAGE.png" title="TITLE_FOR_IMAGE" data-parameters='{"x": 215, "y": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "price": 10}' /> <!-- Here you can add more img designs --> </div> </div>
Plugin Call
$(document).ready(function(){ $('#fpd').fancyProductDesigner().data('fancy-product-designer'); });
Options The plugin comes with a lot of options for customizing it by your needs.
Available Options
Option | Explanation | Default Value |
---|---|---|
minImageWidth | The min. width for all image elements. | 50 |
maxImageWidth | The max. width for all image elements. | 300 |
minTextSize | The min. text size. | 10 |
maxTestSize | The max. text size. | 50 |
textSize | The default text size for all text elements. | 18 |
scrollAmount | The amount of the scrolling | 100 |
fontDropdown | Show or hide the font dropdown for text elements. | true |
fonts | An array containing all available fonts in the font dropdown. You can register custom fonts in the jquery.fancyProductDesigner-fonts.css . |
['Arial', 'Helvetica', 'Times New Roman', 'Verdana', 'Geneva'] |
customTexts | Show the button for adding custom texts to the product by giving it a label. Would you like to hide it, just set this option to false . |
'Add text' |
defaultCustomText | The default text for custom text elements. | 'Enter your text here' |
customTextParamters | The parameters for the custom texts. The object will merge with the default parameters object. | {} |
editorMode | Enable the editor mode to get a box with details about the position and dimension of an element. | false |
canvasAlert | The message that appears when the browser does not support HTML5 canvas. | 'Sorry! But your browser does not support HTML5 Canvas. Please update your browser!' |
outOfContainmentAlert | The alert message when an element is out his containment and calling the getProduct() method. |
'An element is out of his containment. Please move it in his containment!' |
Example
var fpd = $('#fpd').fancyProductDesigner({ maxImageWidth: 100, fontDropdown: false, defaultCustomText: 'Your text here' }).data('fancy-product-designer');
Adding custom fonts
To add custom fonts the dropdown, you only need thewoff
file of your font, if you only have the ttf
file, you can use this converter.Then you register the font with the
@font-face
method.
CSS code:
@font-face { font-family: 'THE_FONT_NAME'; src: local('☺'), url('../fonts/FONT_FILE.woff') format('woff'); font-weight: normal; font-style: normal; }Finally you only need to pass the font name in the array of the fonts options:
$('#fpd').fancyProductDesigner({ fonts: ['Arial', 'Helvetica', 'Times New Roman', 'Verdana', 'Geneva', 'THE_FONT_NAME'] }).data('fancy-product-designer');
Element Parameters Tell the plugin which element can be resized, rotated, colorized etc.
You set these parameters as an object in the data-parameters
attribute for every element in the HTML document.
Parameter (Type) | Explanation | Default Value |
---|---|---|
x (Number) | The x-Position relative to the product container. | 0 |
y (Number) | The y-Position relative to the product container. | 0 |
colors (Boolean or string) | By default its set to false , this means for an image it will not be converted in a canvas element so it can be colorized by the user.You can also enter a string with hex color values separated by commas (e.g. '#000000,#ffffff,#990000'), this will activate a list with static colors. If you want to activate the colorpicker, just enter a string with one hex color value (e.g. '#000000'). |
false |
removable (Boolean) | Set it to true if the element can be removed. |
false |
draggable (Boolean) | Set it to true if the element can be dragged. |
false |
rotatable (Boolean) | Set it to true if the element can be rotated. |
false |
resizable (Boolean) | Set it to true if the element can be resized. |
false |
scale (Number) | The scale factor. For example you want to use an image that can be resized and to prevent that it gets pixelated as soon as the user resize it, you can set larger image and set a scale factor. 1 = no scaling. | 1 |
degree (Number) | A value between 0 and 360 to set the start degree for the rotation. | 0 |
price (Number) | The additional price for that element. | 0 |
boundingBox (Boolean , string or object) | By default its set to false , that means no bounding box.You can also enter a title of another element and the plugin knows that this is the containment for the element. If you want to create a custom bounding box, you can also enter an object with following properties: x,y,width and height. E.g. {x: 100, y: 200, width: 300, height: 400}
|
{} |
Example
//HTML code <div id="fpd"> <div class="fpd-product" title="PRODUCT TITLE" data-thumbnail="PREVIEW.png"> <img src="ANYPNG.png" title="ELEMENT TITLE" data-parameters='{"x": 120, "y": 76, "colors": "#b93434", "price": 20, "draggable": true, "resizable": true}' /> </div> </div> //JS code $('#fpd').fancyProductDesigner().data('fancy-product-designer');
API Use the API to continue with the shopping process.
Methods
Method | Explanation | Parameter (Type) |
---|---|---|
addElement(type, source, title, parameters) | Adds a new element to the product container. This could be a text or image. |
|
Removed since V1.0.1 addText(text) |
Adds a custom text to the product container | text (String) - The default text. |
getProduct(onlyEditableElements) | Returns an object for a single product or an array when using different views for a product. The elements in the array are objects where every object contains the title for the product(view) and an array with all elements and their parameters. | onlyEditableElements (Boolean) - Set it to true if you only want to get the elements that are editable. |
getPrice() | Returns the current price. | - |
clear() | Removes all elements in the product container. | - |
Since V1.0.1 addDesign(title, source, parameters) |
Adds a new design to the design sidebar. |
|
Example
var fpd = $('#fpd').fancyProductDesigner().data('fancy-product-designer'); //return only editable elements console.log(fpd.getProduct(true));
The returning object of the getProduct() method
ThegetProudct()
methods returns an object, with the title of the product and an array with all items. The elements of this array contains also objects with the item parameters of the product. This is how an object look like:
"title": "THE TITLE OF THE ITEM", "source": "THE_IMAGE_URL.png", "parameters": { "x": 0, //the x-position "y": 0, //the y-position "colors": [], //an array containing all color(s) you set for this item "removable": false, "draggable": false, "rotatable": false, "resizable": false, "scale": 1, "degree": 0, //the rotation for the item "price": 0, "boundingBox": false, //the bounding box "source": "THE_IMAGE_URL.png", "originX": 0, //the origin x-position "originY": 0, //the origin y-position "currentColor": "#D5D5D5", //the current color for the item "originWidth": 341, //the origin width - only for image elements "originHeight": 418, //the origin text - only for text elements "width": 341, //the current width - only for image elements "height": 418, //the current height - only for image elements "text": "Enter your text here", //the current text - only for text elements "font": "Arial", //the selected font - only for text elements "textSize": 18 //the current text size in px - only for text elements }
Events
Event | Explanation | Parameter (Type) |
---|---|---|
'canvasFail' | Gets triggered when the browser does not support HTML5 canvas. | event (Event) |
'ready' | Gets triggered when the main structure has been built and the designer is ready to receive API method calls. | event (Event) |
'elementAdded' | Gets triggered when a new element (image, text) has been added to the product. |
|
'productCreate' | Gets triggered when a product is created. |
|
'priceChange' | Gets triggered when the price changes. |
|
'elementOut' | Gets triggered when an element is out his containment. |
|
'elementIn' | Gets triggered when an element is again in his containment |
|
Example
//every time an element is added that has a price, this event will be triggered $('#fpd').bind('priceChange', function(evt, singlePrice, totalPrice) { console.log('Single price:' + singlePrice); console.log('Total price:' + totalPrice); }); //You also have access to the parameters of an element $('#fpd').bind('elementAdded', function(evt, element) { //will return an object with all parameters console.log(element.data('params')); });