Shopify Mailchimp embed form fails to run

Question

Apologies, this is my first post so I may be doing things wrong.

ok, I am no coder nor Javascript person but today I re-added the Mailchimp embedded into my replacement Shopify theme (Brooklyn) as we used to be on another paid them but were unhappy. The form is lacking any real control as it uses an connected site to post straight to the store without my intervention.

There were no prompts on my store no matter if I set the form to be anchored to the. bottom, slide out or modal. So, I decided to try figure it out and I noticed in the javascript debugger in Chrome that there were no errors in relation to the script. I enabled the debug flag in the code "isDebug: true" and I could that it was generating an error calling back to the .js files on Mailchimp.

I then noticed the menu had disappear and there hamburger from the mobile view as well so I started googling more and seeing what was causing this.

So from the start here is what I did: Created an asset called 'mailchimp-custom-popup' and placed the original code from Mailchimp in there: require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us16.list-manage.com","uuid":"32f5d817d0c08b5125bcebd73","lid":"ddb32526fb"}) })

placed the %include% in the theme.liquid just above the body: {% include 'mailchimp-custom-popup' %}

So the menus don't work here (Brooklyn sections theme with drawer enabled) and the script fails to even run.

So I added this that I found on a blog (the jQuery.noConflict part):

jQuery.noConflict ( 
<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us16.list-manage.com","uuid":"32f5d817d0c08b5125bcebd73","lid":"ddb32526fb"}) })</script>
}

But no difference but then a typo led me to something interesting. I accidentally removed a lot of the above code from my snippet file and then the menu re-appeared and the popup started to load after the caches was cleared. This is what the code looked like after the typo:

jQuery.noConflict(
<script
return
)

This was weird as I no longer have the script but it seems to somehow make things work. how is this possible?

On the mobile IOS Chrome with cleared cache it works perfectly every time which still makes no sense as I omitted the code from Mailchimp in my snippet file. Firefox also works too on the Mac and I cannot figure out why or how. Can someone help explain this?

I can explain better if needed but I know Carolin Schnapp will understand this fully.

One last note, on the mobile after the post-sign up screen appears with my discount code for signing up the screen just stays opaque and non-responsive until I refresh the page, not sure why either.

Sorry for such a long story but any help would be so appreciated as I am trying to use more GitHub and other Shopify code to get the awesomeness to the theme. thank you!

UPDATE After posting I re-ran again and check the source output on the website and noticed that the Mailchimp was getting submitted through chimpstatic so it kind of explained how my strange code was working (but not really to me!) and there is a mention of Beeketing an app I used before I changed themes so I am guessing this has something to do with the way it actually works but if anyone can explain I would be so grateful. The script output from source on a working page is (real shop name has been replaced):

<script>(function() {
  function asyncLoad() {
    var urls = ["https:\/\/chimpstatic.com\/mcjs-connected\/js\/users\/32f5d817d0c08b5125bcebd73\/79c69f7b2f9e0f08132bc377f.js?shop=SHOPNAME.myshopify.com","https:\/\/sdk.beeketing.com\/js\/beeketing.js?shop=SHOPNAME.myshopify.com","https:\/\/sdk.beeketing.com\/js\/beeketing.js?shop=SHOPNAME.myshopify.com","\/\/productreviews.shopifycdn.com\/assets\/v4\/spr.js?shop=SHOPNAME.myshopify.com","https:\/\/cdn.shopifycloud.com\/messenger_commerce\/assets\/new_message_us?version=1521191482\u0026page_id=279040275910443\u0026color=blue\u0026size=standard\u0026position_horizontal=left\u0026position_vertical=bottom\u0026messenger_app_id=1163199097047119\u0026shop=SHOPNAME.myshopify.com"];
    for (var i = 0; i < urls.length; i++) {
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      s.src = urls[i];
      var x = document.getElementsByTagName('script')[0];
      x.parentNode.insertBefore(s, x);
    }
  };
  if(window.attachEvent) {
    window.attachEvent('onload', asyncLoad);
  } else {
    window.addEventListener('load', asyncLoad, false);
  }
})();
</script>

Answer 1

Apps can add JavaScript to your Shopify site using the ScriptTag API . ScriptTag scripts will show up in almost any theme; that's why they persisted after you switched to Brooklyn. If you want to remove a ScriptTag script, you can just remove the app that added it.

Answer 2

As per my reply to Josh,I managed to find a post in the Shopify forums yesterday where they removed a part of the script structure which he explained wasn't ideal but worked. The part that made it work and stopped the other JS causing issues was to remove "defer="defer" from another script that was called. Hope that makes sense and thanks again!

Hopefully, this will help someone else as I saw in the Shopify forums that a lot of people had issues with this too.