Getting Started with fpd-js (Developer)

Modified on Thu, 27 Jul 2023 at 12:26 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
); 


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article