Please check out the JSDoc that documents all available options and methods.


Requirements

  • jQuery and jQuery UI (core.js, widget.js, mouse.js, draggable.js, sortable.js)
  • You need coding knowledge in jQuery, HTML, CSS and (PHP).


Third-party plugins


Setup

Include necessary files in your HTML document

First of all include all necessary files in the head part of your HTML document.


Include the CSS file:   

<!-- Main CSS for the product designer -->
<link rel="stylesheet" type="text/css" href="css/FancyProductDesigner-all.min.css" />
<!-- Optional - only when you would like to use custom fonts --> 
<link rel="stylesheet" type="text/css" href="css/jquery.fancyProductDesigner-fonts.css" />

  

Include the Javascript files:   

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<!-- HTML5 canvas library -->
<script src="js/fabric.min.js" type="text/javascript"></script>
<!-- The plugin itself -->
<script src="js/FancyProductDesigner-all.min.js" type="text/javascript"></script>

  If you already include jquery in your page, you do not need to another one. Please use jQuery 1.7 or higher!. You get the latest version of jquery here.


If you want to work with the unminified version, you also have to include a second Javascript file:     

<script src="js/plugins.js" type="text/javascript"></script>
<script src="js/FancyProductDesigner.js" type="text/javascript"></script> 

     

Setting up the HTML markup

First create a div with a unique id: 

<div id="fpd">
</div>

 This div element is the main container for your product designer. If you would like to use the horizontal layout for the sidebar, just add the css class fpd-horizontal to the main container.


Add products

You can add unlimited products to your Product Designer, just create div element(s) with the fpd-product class in your previous created div. These div elements also need a title and data-thumbnail attribute. Set in the title attribute a title for the product and in the data-thumbnail attribute the URL of the thumbnail that appears in the sidebar: 

<div id="fpd">
  <div class="fpd-product" title="TITLE" data-thumbnail="PREVIEW.png">
  </div>
  <div class="fpd-product" title="ANOTHER_TITLE" data-thumbnail="ANOTHER_PREVIEW.png">
  </div>
  <!-- Here you can add more product divs -->
</div>

 

Categorize the products

You can even create different categories for your products. Just wrap the fpd-product div into fpd-category div's. 

<div id="fpd">
	<div class="fpd-category" title="First Category">
  		<div class="fpd-product" title="TITLE" data-thumbnail="PREVIEW.png"></div>
  		<div class="fpd-product" title="ANOTHER_TITLE" data-thumbnail="ANOTHER_PREVIEW.png"></div>
	</div>
	<div class="fpd-category" title="Second Category">
  		<div class="fpd-product" title="TITLE" data-thumbnail="PREVIEW.png"></div>
  		<div class="fpd-product" title="ANOTHER_TITLE" data-thumbnail="ANOTHER_PREVIEW.png"></div>
	</div>
  <!-- Here you can add more product divs -->
</div>

 Now you can start with creating your products and their elements. You add img and span in the fpd-product elements. These elements need a title and optional a data-parameters attribute. The img elements also need a src attribute, which get the URL of an image, you should use png files to have a transparent background.

The default text of a text element is set between the opening and the closing span tag.
In the data-parameters attribute you set the parameters to adjust an element for your needs, e.g. if its can be resized, colorized, moved etc. 

 

<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>


Adding designs

If you want to enable the designs sidebar, just create another div with the fpd-designs class in the main div id="fpd": 

<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">
  </div>
</div>

 

In this div you only add img elements with the same attributes like you create in the fpd-product elements: 

<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>

 

You can also categorize your designs and set category parameters, which will be used for the designs in the category. 

<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">
    <div class="fpd-category" data-parameters='{"price": 10}'>
      <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}' />
      <!-- Here you can add more img designs -->
    </div>
    <div class="fpd-category" data-parameters='{"price": 20}'>
      <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}' />
      <!-- Here you can add more img designs -->
    </div>
  </div> 
</div>

 

Create different views of a product


You can also add different views of a product, just create a new fpd-product element within another fpd-product element. You can even set different options for the view via the data-options attribute.

<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 class="fpd-product" title="TITLE" data-thumbnail="PREVIEW.png" data-options={"customImageParameters": {"price": 20}}>
     <!-- Here you add some other img and span elements -->
     </div>
  </div>
  <!-- Here you can add more product divs -->
</div>

  

Call the Plugin


Now you can call the plugin with the main div id="fpd" as selector in a javascript block. You also need to bind a data string to the plugin, because its a object-oriented plugin.    

$(document).ready(function(){

  var $fpd = $('#fpd'),
        pluginOpts = {stageWidth: 1200, stageHeight: 800};
 
  var yourDesigner = new FancyProductDesigner($fpd, pluginOpts);

 //api methods can be used
 yourDesigner.print()

  //you can listen to events
  $fpd.on('productCreate', function() {
	//do something
  });
});

    

Please check out the official API documentation for all available options, methods and events.