Again: dealing with 3rd-party JS modules in Plone 5 is a major pain

Plone Support Add-on Development
21

This happens because your add-on js library isn't using amd properly but it trying to support it.

You can reset the require js definitions so the addon js library will work like this(this implementation assumes you DO NOT use AMD inside your custom script):

<metal:javascript fill-slot="javascript_head_slot">
<script>
require = undefined;
define = undefined;
</script>
<script src="++theme++osa/magnific-popup.js"></script> 
<script src="++theme++osa/image-gallery-popup.js"></script>   
</metal:javascript>

Or, you can simply use AMD ONLY and not use amd along with manually loading the js file:

include:

<metal:javascript fill-slot="javascript_head_slot">
<script src="++theme++osa/image-gallery-popup.js"></script>   
</metal:javascript>

JS file:

require([
    'jquery',
    '++theme++osa/magnific-popup'  // Note: no `.js`
], function($) {
    $('.popup-gallery').magnificPopup();
});

Also, you can simply add the JS files at the bottom of the file and do not use to use the slots.

2 Likes
22

Still can't get this option to work:

<metal:javascript fill-slot="javascript_head_slot">
<script src="++theme++osa/image-gallery-popup.js"></script>   

require([
    'jquery',
    '++theme++osa/magnific-popup'  // Note: no `.js`
], function($) {
    $('.popup-gallery').magnificPopup();
});

but option #1 works! Thank you!!!

Wasn't sure if it was good practice to load the js files at the bottom—I should have tried it before reading various comments.

Thanks again!

1 Like
23

Since I was struggling for a long time, I put my code here....

<script>
  require([
    'jquery',
    '++theme++mytheme/jquery.magnific-popup'  // Note: no `.js`
  ], function($) {
       $('#content-core img').magnificPopup({
        type: 'image',
        callbacks: {
            elementParse: function(item) {
                item.src = item.el.attr('src');
            }
        }
        });
       
    });
</script>