Placing a FPD module into an own HTML element

Modified on Mon, 19 Dec 2022 at 03:43 PM

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
})


data-moduleJS Class
productsFPDProductsModule
images
FPDImagesModule
text
FPDTextModule
designs
FPDDesignsModule
manage-layers
FPDLayersModule
names-numbers
FPDNamesNumbersModule
drawing
FPDDrawingModule
layouts
FPDLayoutsModule
dynamic-views
FPDDynamicViews
text-layers
FPDTextLayersModule