Initial Setup

Modified on: Mon, 9 Sep, 2024 at 12:05 PM

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

<link rel="stylesheet" type="text/css" href="css/FancyProductDesigner.min.css" />
<script src="js/fabric-5.3.1.min.js" type="text/javascript"></script>
<script src="js/FancyProductDesigner.min.js" type="text/javascript"></script>

Setting up products & designs

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.

const appOptions = {};

const fpd = new FancyProductDesigner(
    document.getElementById('fpd-target'), 
    appOptions
);