Welcome to the support center for

Fancy Product Designer & Multistep Product Configurator

Error message upon setup

Hey All,


I followed the Quick Setup for jQuery and I received this error once I launched the server. I can not figure out the problem. What have I done wrong?

FancyProductDesigner.js:6803 Uncaught TypeError: Cannot read property 'addEventListener' of undefined
    at _initialize (FancyProductDesigner.js:6803)
    at new FPDToolbarSmart (FancyProductDesigner.js:7790)
    at Object.anonymFuncs.loadProductDesignerTemplate [as success] (FancyProductDesigner.js:12373)
    at u (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at k (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)


My Javascript:

$(document).ready(function(){

  var $fpd = $('#fpd'),
        pluginOpts = {stageWidth: 1200, stageHeight: 800, langJSON: 'assets/third_party/Designer/lang/default.json'};
 
  var yourDesigner = new FancyProductDesigner($fpd, pluginOpts);

  //you can listen to events
  $fpd.on('productCreate', function() {

      //api methods can be used
      yourDesigner.print()

  });
});

  And my html: 

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="assets/third_party/Designer/css/FancyProductDesigner-all.min.css" />

  </head>
  <body>

    <div id="fpd"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <!-- HTML5 canvas library -->
    <script src="assets/third_party/Designer/js/fabric.min.js" type="text/javascript"></script>
    <!-- The plugin itself -->
    <script src="assets/third_party/Designer/js/plugins.js" type="text/javascript"></script>
    <script src="assets/third_party/Designer/js/FancyProductDesigner.js" type="text/javascript"></script>

    <script src="assets/js/designer.js"></script>

    <script defer src="/__/firebase/5.2.0/firebase-app.js"></script>
    <script defer src="/__/firebase/5.2.0/firebase-auth.js"></script>
    <script defer src="/__/firebase/5.2.0/firebase-database.js"></script>
    <script defer src="/__/firebase/5.2.0/firebase-messaging.js"></script>
    <script defer src="/__/firebase/5.2.0/firebase-storage.js"></script>
    <script defer src="/__/firebase/init.js"></script>

  </body>
</html>

 I hope that information helps and someone can help me out!


Login or Signup to post a comment