Getting Started with jQuery (Developer)

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

Requirements

• If developing locally, you need to run the example index.html with a local web server like Mamp or Xampp.
• jQuery and jQuery UI (core.js, widget.js, mouse.js, draggable.js, sortable.js)
• You need coding knowledge in jQuery, HTML, CSS and (PHP).
  

Include JS/CSS files

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

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 products & designs

Since version 4.9.0 we recommend to use JSON files to store your products templates and designs, depending on the amount of products and designs the data can be quite big and mixing the data content with the HTML markup can lead to performance issues. From the view of a coder it is also more coder-friendly  to separate the data from the HTML structure. That's why we do not recommend to set up all products and designs in the HTML markup.

When you init the FancyProductDesigner plugin, you can easily pass the URLs of the products and design JSON files or directly the JSON objects in the plugin options (see productsJSON and designsJSON options).

Products

To understand the required JSON scheme for products, please open this file. (It's not a valid JSON, because it includes comments for explaining the different keys and values).

Designs

To understand the required JSON scheme for designs, please open this file. (It's not a valid JSON, because it includes comments for explaining the different keys and values).

You can find more JSON examples in the example/json folder of the downloaded archive!

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 = {
          productsJSON: 'json/designs.json',
        designsJSON: 'json/products.json',
          stageWidth: 1200, 
          stageHeight: 800
       };
 
  var yourDesigner = new FancyProductDesigner($fpd, pluginOpts);



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

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

  });
});

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