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-module | JS Class |
products | FPDProductsModule |
images | FPDImagesModule |
text | FPDTextModule |
designs | FPDDesignsModule |
manage-layers | FPDLayersModule |
names-numbers | FPDNamesNumbersModule |
drawing | FPDDrawingModule |
layouts | FPDLayoutsModule |
dynamic-views | FPDDynamicViews |
text-layers | FPDTextLayersModule |