0

one external js library has this kind of code and full library of code at bottom

 !(function (o, e, t, _) { ........... ....... .......... })(jQuery, window, document); 

magento 2 throws error for this (jQuery, window, document);

<div class="et_pb_text_inner"><div id="image-map-pro-container"></div></div> 

below code working fine in local php server

<div class="et_pb_text_inner"><div id="image-map-pro-container"></div></div> <script type="text/javascript"> ;(function ($, window, document, undefined) { $(document).ready(function() { $('#image-map-pro-container').imageMapPro({"id":1596,"editor":{"selected_shape":"rect-2290","tool":"rect","shapeCounter":{"rects":5}},"general":{"name":"Untitled"},"spots":[{"id":"rect-1110","title":"Area 1","type":"rect","x":12.125,"y":21.333,"width":25.5,"height":25.111,"x_image_background":12.125,"y_image_background":21.333,"width_image_background":25.5,"height_image_background":25.111,"actions":{"click":"follow-link","link":"Google.com"},"default_style":{"opacity":0.5299145299145299,"border_radius":10,"background_color":"Black","background_opacity":0.3999732905982906,"border_width":7},"mouseover_style":{"border_radius":10},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Rect 0"}}}]}}]}}},{"id":"rect-1185","title":"Area 2","type":"rect","x":51,"y":29.333,"width":36,"height":48.444,"x_image_background":51,"y_image_background":29.333,"width_image_background":36,"height_image_background":48.444,"actions":{"click":"follow-link","link":"yahoo.com"},"default_style":{"border_radius":10,"background_color":"Green","background_opacity":0.7504006410256411},"mouseover_style":{"border_radius":10},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Rect 3"}}}]}}]}}},{"id":"rect-2290","title":"Area 3","type":"rect","x":4.375,"y":48.889,"width":40.625,"height":42.667,"x_image_background":4.375,"y_image_background":48.889,"width_image_background":40.625,"height_image_background":42.667,"static":1,"actions":{"click":"follow-link","link":"msn.com"},"default_style":{"border_radius":2,"background_color":"#123456","background_opacity":0.9726228632478633,"border_width":13,"border_color":"#aaaa5f"},"mouseover_style":{"border_radius":10},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-60621","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"THIS IS A TOOL TIP"}}}]}}]}}}]}); }); })(jQuery, window, document); </script> 

Whern I inject code in magento 2 it is not wokring

 require(['jquery'], function($){ $('#image-map-pro-container').imageMapPro({"id":1596,"editor":{"selected_shape":"rect-2290","tool":"rect","shapeCounter":{"rects":5}},"general":{"name":"Untitled"},"spots":[{"id":"rect-1110","title":"Area 1","type":"rect","x":12.125,"y":21.333,"width":25.5,"height":25.111,"x_image_background":12.125,"y_image_background":21.333,"width_image_background":25.5,"height_image_background":25.111,"actions":{"click":"follow-link","link":"Google.com"},"default_style":{"opacity":0.5299145299145299,"border_radius":10,"background_color":"Black","background_opacity":0.3999732905982906,"border_width":7},"mouseover_style":{"border_radius":10},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Rect 0"}}}]}}]}}},{"id":"rect-1185","title":"Area 2","type":"rect","x":51,"y":29.333,"width":36,"height":48.444,"x_image_background":51,"y_image_background":29.333,"width_image_background":36,"height_image_background":48.444,"actions":{"click":"follow-link","link":"yahoo.com"},"default_style":{"border_radius":10,"background_color":"Green","background_opacity":0.7504006410256411},"mouseover_style":{"border_radius":10},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Rect 3"}}}]}}]}}},{"id":"rect-2290","title":"Area 3","type":"rect","x":4.375,"y":48.889,"width":40.625,"height":42.667,"x_image_background":4.375,"y_image_background":48.889,"width_image_background":40.625,"height_image_background":42.667,"static":1,"actions":{"click":"follow-link","link":"msn.com"},"default_style":{"border_radius":2,"background_color":"#123456","background_opacity":0.9726228632478633,"border_width":13,"border_color":"#aaaa5f"},"mouseover_style":{"border_radius":10},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-60621","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"THIS IS A TOOL TIP"}}}]}}]}}}]}); }); 

1 Answer 1

1

Probably you are not injecting your library correctly. Let's imagine you have your external library in:

https://yourexternal.com/library.js

To use it in Magento, you should:

  1. Map it in a requirejs-config.js file in your module (Vendor/Module/view/frontend/requirejs-config.js) like this:
var config = { map: { '*': { imagemappro: 'https://yourexternal.com/library.js' } } }; 
  1. Once you've done that, you can use it in your script:
require(['jquery', 'imagemappro'], function($, imagemappro){ // your code }); 

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.