Masonry/Isotope not working with Mailchimp Embed

[steveush]

Hi @desandro,

I'm trying to debug an issue on a WordPress site where the theme has hard coded in Isotope and our gallery plugin includes Masonry using the default wp_enqueue method. The issue I'm having is that neither are registering themselves on the window object. So trying to initialize either plugin using there class name fails with Masonry/Isotope is undefined even though the scripts are being included in the page. Do you know of any circumstances where the plugins will not register themselves? Or is there some global variable cleanup happening due to both being included in the page? Any thoughts on the above will help me out.

I'm guessing nothing is registered if an unhandled error is thrown as the script is loaded however I can't seem to track one down.

Thanks in advance.
Steve

[desandro]

How are you loading the scripts? If they are on the page as individual <script> tags, then they should be available on window. Otherwise, they are being consumed by a module loader

[steveush]

Both are being included by individual <script/> tags, Isotope is bundled up in one large file with the rest of the theme plugins and Masonry is just included by itself. This is why I was scratching my head a bit trying to figure out why neither appeared on the window.

[desandro]

Can you provide a live link to the site with the issue?

[steveush]

Hi @desandro,

Apologies for the delay, the client removed the Masonry galleries from his site over Nov/Dec as he was running a sale and instead used one of our other templates. He has now put up another page which displays the same issue again and you can see it here http://www.urbancraftuprising.com/preview-night/, under the header Raffle Donors there should be a Masonry gallery which is not being displayed.

Basically you can see in sources that wp-includes/js/masonry.min.js v3.3.2 is being included however in his theme file found at wp-content/themes/HighendWP/scripts/scripts.js there is Isotope also being included. If you open the console and type window.Masonry it returns undefined which is then causing our gallery script to fail as we can't initialize Masonry using the vanilla constructor.

Again thanks for any help you could possibly provide.

Thanks

[desandro]

Thanks for following. I tried taking a look and I'm not sure what's going on. I can see Isotope and Masonry source in the scripts, but they are not being assigned to global object window, nor is jQuery.fn.isotope or jQuery.fn.masonry being assigned.

Maybe it's the way the source code has been added to scripts.js. Maybe there's another script in there that's shimming in something else for window. Its hard for me to pinpoint the issue with so many scripts running. My recommendation is to try and disable other scripts/plugins and seeing if that makes any difference.

[steveush]

Hi @desandro,

I actually think it has to do with this script being inserted into the page by Mailchimp for a sign-up form. They include a module loader within it (search for .amd or dojotoolkit.org) which is what I think Masonry/Isotope is picking up on. So using this repo's code as an example the if check made on line 8 here for define is returning true. This same check is performed in the Masonry code which is why both are not registered on the window.

I think the title could be changed to Masonry/Isotope not working with Mailchimp Embed to be more accurate however that doesn't resolve the problem. Mailchimp is massively popular in the WP community I can only imagine this must be affecting quite a number of users who simply give up after not finding a solution to why their Masonry layouts are failing.

That said any suggestions to move forward here? This seems to be an issue mainly with Mailchimp's code relying on Dojotoolkits module loader but this issue could popup for any number of custom loaders I guess.

Thanks

[desandro]

Ah! Thanks for the revelation. This is the first I'm hearing of such a collision.

Could a fix be adding the Mailchimp embed script after Isotope/Masonry/imagesLoaded?

[steveush]

I've let the site owner know to try your suggestion and I'll update you once I hear back. While I think it will work it is a bit of a brittle solution to the issue, especially in the WordPress environment as scripts are simply en-queued into a page depending on when there plugins' PHP is executed andd what dependencies they list. This order could change depending on plugin names etc. and is usually out of the users control. In this case however they are using a plugin to manually insert the Mailchimp scripts so I've asked the user to move it to the footer rather than in the head and we'll see if it resolves it.

[desandro]

Related: https://gist.github.com/nickcernis/3df74c0c6c18b75cb951

[steveush]

Hey @desandro,

User replied saying moving the script to the footer resolved the issue for them. The "related" script you linked could come in handy if we have any further reports of this issue logged.

Thanks again for your help, cheers.

[desandro]

From metafizzy/flickity#831, the Mailchimp embed includes its own version of RequireJS. But Isotope v3 does not offer a named package in its module definition for RequireJS. So I do not believe there is a direct solution like in metafizzy/flickity#831

[ollilappalainen]

I thought I was the only one with this issue. I'm glad to find someone who also has this. Also occurs with smooth-scroll .. mostly both seem to complain about embed.js file, the dojo attribute and require.. Basically embed script causes require to return empty objects??

[ollilappalainen]

Hey @desandro,

User replied saying moving the script to the footer resolved the issue for them. The "related" script you linked could come in handy if we have any further reports of this issue logged.

Thanks again for your help, cheers.

Also adding to footer fixed the issue. Make it last script loaded and it won't break other scripts.