• Adding patterns for text and SVG elements

  Patterns can only be used with SVG images or text elements. Store patterns in folder First of all you need to upload the png or jpeg files that you would like to use as patterns, to the patterns directory or to your desired directory. Enabling patterns You can define different patterns to every text or SVG image separately. For that you can enable an array of URLs to pattern image in the [patterns property](https://jquerydoc.fancyproductdesigner.com/classes/Options.defaults.elementPaSome readers

• Changing/translating the labels

  Since V3 its very easy to change/translate all labels used in the product designer. All labels(texts) are stored in a separate JSON file, which is located in the lang folder of the example. Just open default.json and start editing all labels. Do not change the keys! If you want to change the location of the JSON or the filename, you have to enter the correctSome readers

• How to store a product in a mysql database and load it from the same database?

  In this article I am going to explain how you can store a customized product in a mysql database and load it from the same database. Step 1: First of all create a mysql structure like that: Step 2: You also need a PHP script which is storing and loading a product in the database. I will send an action via POST to this script, that tells the script whSome readers

• Setting up the modules

  You can easily add the modules you need to the product designer. The modules can be set via the plugin options. //will display in the order how you define the values in the arrayvar opts = {mainBarModules: ['products', 'designs', 'images', 'text']};var fpd = new FancyProductDesigner(document.getElementById('fpd-target'), opts); Available Modules | products | The products module shows all products categorized in a list view. | designs | The designs module displays the designs yoSome readers

• Element Parameters

  With element parameters you control the behavior and properties of an element, e.g. if it can be dragged or the position on the stage. These can be set for a group of elements or for every element separately. Where can I set these parameters? 1. Change the default parameters via the plugin call The first level to change all default parameters are the plugin options. There you will find 4 options to change the common, text, custom image and custom text parametes: new FancyProductDFew readers

• Saving the product image with PHP

  You find a PHP script in the source folder, which will save an image on your webserver. You only need to send the data url of your product to this script, which will create an image from it. //send data url to php script when clicking on a custom element$('#save-image-php').click(function() { thsirtDesigner.getProductDataURL(function(dataURL) {$.post("php/save_image.php", { base64_image: dataURL}, function(data) {         if(data) {             //window.open(data, '_blank');         }Few readers

• Using API methods and events

  The official API documentation can be found here. The main entry point to use the API is the FancyProductDesigner class: var fpd = new FancyProductDesigner(document.getElementById('fpd-target')); The fpd variable will give you access to all methods and properties of the FancyProductDesigner class. For exampleFew readers

• Layouts

  The Layouts module is similar to the Products module, but instead of changing the whole product (all views), it allows to change a single view inside of the displaying product. You can set up your layouts inside the plugin options with the layouts option. The layouts option receives an array containing objects representing a view. Example of layouts option: layouts: [ { title: 'My View Layout', thumbnFew readers

• Placing a FPD module into an own HTML element

  As our plugin is modular-built, you can easily put all FPD modules into a custom HTML element. That allows to use the modules outside of the product designer mainbar. var fancyProductDesigner = document.getElementById('fpd-target').instance;fancyProductDesigner.addEventListener('ready', function() { //wait until the ui is loadednew FPDProductsModule(fancyProductDesigner, document.getElementById('custom-module-wrap'));}) ```| | | products | FPDProductsModule | | --- | --- | | images | FPDImagesModule | |Few readers

• Using own fonts for the fonts dropdown

  You can set up the available fonts, that your customers can choose from, via the fonts option. Custom Fonts You can easily register custom TrueType fonts (ttf). Move your ttf files in a fonts folder. Set the name and URL of the font in the fonts option: ``Few readers

• Customizing the UI&Layout

  Most of the layout options can be easily set via CSS classes that you need to add the product designer element which is used in new FancyProductDesigner(). You can use the UI&Layout Composer on the official fancyproductdesigner.com website to generate some "Get-Started" code. CSS Classes | fpd-topbar | Main navigation will be displayed in a top bar. | fpd-sidebar |Few readers

• Send proudct image to a mail address

  You find a PHP script in the source folder, which will send an image to a custom mail address. In the PHP file you set also the sender mail address, recipient mail address, subject and mail text. //send data url to php script when clicking on a custom element$('#save-image-php').click(function() { thsirtDesigner.getProductDataURL(function(dataURL) {$.post("php/send_image_via_mail.php", { base64_image: thsirtDesigner.getProductDataURL() }, function(data) {         if(data) {             cFew readers

• Initial Setup

  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/Few readers

• Remove an element

  If you want to remove an element, e.g. before generating the product image, you can use the API of FPD first and then you can use the fabricjs API. Using getElementByTitle method to return the fabricjs object: var fabricElement = thsirtDesigner.currentViewInstance.fabricCanvas.getElementByTitle('title-of-an-element');console.log(fabricElemenFew readers

• Defining Bounding Boxes

  You can define bounding boxes for every element separately or in the plugin options which will apply the bounding box to multiple elements. How to define a bounding box The bounding box property accepts 3 different values. | Boolean: false | Default value. No bounding box. | Object: {width: 100, height: 200, y: 20: x: 50} | An object defining a custom bounding box byFew readers

• [Pricing Rule] Setting up pricing rules

  To generate the pricing rules for your product designer, we offer a handy online tool that will create the JS code that you can easily copy & paste into your website. Just go to http://fancyproductdesigner.com/addon-pricing-rules/ and scroll down to "Create Pricing Rules". Here you can define own pricing groups and in every pricing group you can set the pricing rules for various element properties. When you are done, click on the "GET JS CFew readers

• Managing the Action buttons

  Action buttons are displaying in the product stage and can be individually in different positions. var pluginOpts = {actions: { 'left': ['download','print', 'snap', 'preview-lightbox'], 'right': ['zoom', 'reset-product'], 'center': ['undo','redo'],});var fpd = new FancyProductDesigner(document.getElementById('fpd-target'), pluginOpts); Available Actions | print Prints the product. snap While dragging an element, it will snap to helper lines. preview-lightbox | View tFew readers

• Checkout with getProduct()

  Would you like to use the plugin with a shopping-system, then you have to use the `getProduct()` method. $('#checkout-button').click(function(){ //store the views of a product with all elements of a single view var productViews = thsirtDesigner.getProduct(); //loop through all views for(var i=0; i < productViews.length; ++i) { //output all single view objects console.log(productViews[i]); }}); With help of the jQuery.ajax method, you can eaFew readers