MailChimp Subscriber Pop-Up Troubleshooting

Tourist
16 0 2

I have looked around the forum here and have yet to find the answer, so I thought I would post another thread about it. 

I am trying to use the MailChimp Subscriber Pop-Up with my theme (Debut), but whenever I embed the code that is generate by MailChimp, it results in errors in the Console log. I have pasted the errors for reference.

Uncaught ReferenceError: enquire is not defined
    at Object.init (theme.js:837)
    at Header (theme.js:2044)
    at Sections._createInstance (theme.js:31)
    at Sections.<anonymous> (theme.js:109)
    at Function.each (vendor.js:13)
    at re.fn.init.each (vendor.js:13)
    at Sections.register (theme.js:108)
    at HTMLDocument.<anonymous> (theme.js:2597)
    at u (vendor.js:14)
    at Object.fireWith [as resolveWith] (vendor.js:14)
embed.js:1893 Error: multipleDefine
    at makeError (embed.js:119)
    at defineModule (embed.js:1579)
    at embed.js:1635
    at forEach (embed.js:106)
    at runDefQ (embed.js:1634)
    at onLoadCallback (embed.js:1451)
    at HTMLScriptElement.onLoad (embed.js:1721)
(anonymous) @ embed.js:1893
embed.js:1896 src: dojoLoader
embed.js:1896 info: Object
embed.js:1898 .
embed.js:1893 Error: multipleDefine
    at makeError (embed.js:119)
    at defineModule (embed.js:1579)
    at embed.js:1635
    at forEach (embed.js:106)
    at runDefQ (embed.js:1634)
    at onLoadCallback (embed.js:1451)
    at HTMLScriptElement.onLoad (embed.js:1721)
(anonymous) @ embed.js:1893
embed.js:1896 src: dojoLoader
embed.js:1896 info: Object
embed.js:1898 .
embed.js:1893 Error: multipleDefine
    at makeError (embed.js:119)
    at defineModule (embed.js:1579)
    at def (embed.js:1836)
    at ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:5
    at ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2
    at ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2
(anonymous) @ embed.js:1893
embed.js:1896 src: dojoLoader
embed.js:1896 info: Object
embed.js:1898 .

Does anyone know how to resolve the issue? For me, the incompatibility is resulting in a conflict with my product/cart experience, where products with a variant can't be added with the variant in tact. 

I have found other plugins that can resolve the issue, but I would like to keep things between MailChimp and Shopify if possible for ease of use for the client.

Thanks!

Development store pass: pookro

1 Like
Tourist
16 0 2

@REI - Unfortunately I don't have any progress to share... I wish I did. 

0 Likes
Tourist
16 0 2

For anyone out there that wants to take a look at this further, I have created a separate development store that is simplified.

https://shopifymailchimppopup.myshopify.com/

I also have a screenshot that helps identify what the issues are... I have boiled it down to conflicts between Shopify's JS and Mailchimp's JS as that's all that we're really using from a foundational standpoint. 

The same results happen, where if you try to add a "L" variant, the cart shows that you have the "S" size added to it.

One thing I have done which is different than before is to put the mailchimp JS in a snippet and reference it from the theme.liquid file. Same results however.

I know jQuery has a "no-conflict" mode. Is there anything like that out there for the Mailchimp or Shopify scripts that we need to use? I haven't found anything yet in my searches.

Any help is appreciated.

Thanks!

 

0 Likes
Tourist
16 0 2

@REI - What theme are you using? I am playing with Debut, but when I changed to Simple, it seems to work fine. I unfortunately am too invested in Debut to go back now... But thought I would share that finding with you.

0 Likes
New Member
3 0 0

Hi! I'm on Debut too and when I add the Mailchimp code, the header slideshow fails. I'm not very good with codes, but I've attempted to add it in the various ways mentioned in this forum:

1) Added the mailchimp code as a snippet, then added a callback in the theme.liquid just above </body> -- resulted in the slideshow area being taken over by the pop-up content

2) Added the mailchimp code right itself just above </body> -- the slideshow area would just be a grey box and the pop-up wouldn't appear.

I'm quite new to this and I poked around the code to try solve this. It resulted in a few scares  (thought I deleted my store at one point :s). Not feeling up to poking around deeper without causing irreversible damage so I look forward to advice and guidance on how to solve this please!

0 Likes
Shopify Partner
2 0 0

Having the same issues with Debut theme (adding the mailchimp code breaks the sliders).

Really annoying that it seems to be primarily an issue with this theme, any progress on debugging this guys?

0 Likes
New Member
4 0 0

Hi all,

I just ran into this issue on a clients theme. They started with Debut and we were doing some customizations like adding an AJAX cart etc. When they added the same mailchimp evil popup code it broke the sliders just like you all are seeing.

The MailChimp code is breaking the loading of the vendor.js asset which is deferring it's loading so that it doesn't hold up the site and slow it down. As a quick fix you could just open theme.liquid change this line 

<!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script><!--<![endif]-->

to

<!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'vendor.js' | asset_url }}"></script><!--<![endif]-->

 

But that's not really how you should fix it. Here's what you should do.

1.) Add the MailChimp javascript to the head. Note I added defer="defer" into the script so it won't be a blocking script. Place this code (or the similar code that your MailChimp Evil Popup wants you to put there) directly above the </head>.

{% comment %}MailChimp EvilPopup{% endcomment %}
  <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false" defer="defer"></script>

2.) Add the javascript that will create your form.

Open up theme.js and find

theme.Header = (function() {
  var selectors = {
    body: 'body',
    navigation: '#AccessibleNav',
    siteNavHasDropdown: '.site-nav--has-dropdown',
    siteNavChildLinks: '.site-nav__child-link',
    siteNavActiveDropdown: '.site-nav--active-dropdown',
    siteNavLinkMain: '.site-nav__link--main',
    siteNavChildLink: '.site-nav__link--last'
  };

  var config = {
    activeClass: 'site-nav--active-dropdown',
    childLinkClass: 'site-nav__child-link'
  };

  var cache = {};

  function init() {

directly after that place the code from the second part of the EvilPopup Script like so. Replacing the baseUrl, uuid and the lid with yours.

    // MailChimp Evil Popup
    require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"xxxxxxxxxxxx","uuid":"xxxxxxxxxxxxxxxxx","lid":"xxxxxxxxx"}) })

 

0 Likes
New Member
3 0 0

Hey Brandt! Thanks for the solution! The first method worked for me!

I removed the defer="defer" portion of the line for vendor.js, then included just above </body> the  callback to the Mailchimp Popup snippet I had created earlier. Loading time for the site is definitely slower than without the popup, but ultimately, it's working now!

I tried the second method but couldn't get that to work. Am a bit confused as to which "function init() {" to look out for too, because there are a few of them in the theme.js.

Hope this works for everyone else too!

0 Likes
New Member
4 0 0

Hey Liyi,

Sorry about that. I would suggest adding to the theme.Header function as that will get loaded every time. I edited my post so that is more clear. 

Glad it helped a bit.

0 Likes