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 = $('#your-designer').data('instance');

$('#your-designer')
.on('uiSet', function() { //wait until the ui is loaded
  //get transalted UI module from FancyProductDesigner instance
  var $moduleClone = fancyProductDesigner.translatedUI.find('.fpd-modules > [data-module="products"]').clone();

  $moduleClone.appendTo($('#custom-div')); //add module UI into custom HTML
  new FPDProductsModule(fancyProductDesigner, $moduleClone); //init JS Module
})