mailchimp / mc-magento

Mailchimp for Magento 1 Integration. Syncs all data (subscriber, customers, orders, products) and enables marketing automation with email campaigns, automations, ads, postcards and more.
https://mailchimp.com/integrations/magento/
Open Software License 3.0
121 stars 94 forks source link

JS Errors - <params>async</params> #828

Closed posttechguy closed 5 years ago

posttechguy commented 5 years ago

Async killed my implementation.

When async was added to app/design/frontend/base/default/layout/ebizmarts/mailchimp.xml on line 8

<params>async</params>

It resorted the js so the skin js was above the js folder js causing jQuery to not work

and added a "1" at the end of the script tags

Preconditions

  1. Using Mailchimp 1.1.12 updated from 1.1.7
  2. Js is merged on production and not on UAT, both had same issue

Steps to reproduce

Updated code from new 1.1.12

Expected result

  1. No js errors, Mailchimp getCampaign() to run

Actual result

  1. Getting TypeError: document.observe is not a function error in Chrome console The skin js loaded before js files and failed on js/ebizmarts/mailchimp/campaignCatcher.js line 46 document.observe('dom:loaded', getCampaign);
  2. other errors that required Jquery

I see that it was added in https://github.com/mailchimp/mc-magento/issues/624

Santiagoebizmarts commented 5 years ago

Hello @posttechguy

Can you elaborate on this? I don't see anything in the "skin_js" sections that could have problems with our javascript file. The campaignCatcher.js file is under "js", not "skin_js" so it should be loaded after everything else.

Can you point me to your site's url in order to see the error for myself and hopefully understand what is happening in this particular case?

Regards.

posttechguy commented 5 years ago

Hi @Santiagoebizmarts,

So with the async tag included in the mailchimp.xml I get this

`

<script type="text/javascript" src="https://myurl.com/js/prototype/prototype.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/lib/ccard.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/prototype/validation.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/scriptaculous/builder.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/scriptaculous/effects.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/scriptaculous/dragdrop.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/scriptaculous/controls.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/scriptaculous/slider.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/varien/js.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/varien/form.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/varien/menu.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/mage/translate.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/mage/cookies.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/magestore/affiliateplus.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/magestore/giftvoucher/giftvoucher.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/tinybox/tinybox.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/lib.min.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/theme.min.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/lib/jquery/noconflict.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/varien/weee.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/varien/product.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/giftpromo/ext-product.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/giftpromo/ext-form.js" 1=""> <script type="text/javascript" src="https://myurl.com/js/giftpromo/dialog.js" 1=""> `

When I took it out it worked fine, putting the default system js at the top and the template js at the bottom.

You will also note that each of the system js script links have a 1="" attribute in them. Not sure what that means.

When included it stopped js from working correctly as the jquery was not loaded before it was trying to be used by the template files.

Thanks for looking at this

Santiagoebizmarts commented 5 years ago

Hello @posttechguy

I will do some tests with this as I am not able to replicate your problem. Could you try placing "defer" in stead of "async". The idea of this is to avoid wasting time when the page is being loaded, I would prefer a different solution than removing it.

Kind Regards.

posttechguy commented 5 years ago

Hi @Santiagoebizmarts

Used defer and cleared the cache; the same thing happened. Yes anything to speed up Magento would be good. :0)

Kind Regards

Bevan

posttechguy commented 5 years ago

Hi @Santiagoebizmarts

Can I provide you any more information on this ticket

Kind Regards Bevan

mindfriction commented 5 years ago

@posttechguy Are you using Cloudflare by chance? I encountered this same problem when using Cloudflare. Specifically, Rocket Loader (Cloudflare feature) which loads all scripts async.

For me, It seemed that when using Rocket Loader the async would cause issues for me, so I just had to manually remove the params and everything worked fine.

posttechguy commented 5 years ago

@mindfriction Yes, we are but we are not using any apps. I did the same thing by removing the async tags, and it worked. Good spotting

leeroybrun commented 5 years ago

Same problem here. After updating Mailchimp for Magento our whole site crashed (lots of Javascript errors, jQuery not defined, etc).

I removed the <params>async</params> and everything works fine again.

Santiagoebizmarts commented 5 years ago

Hello @leeroybrun

Thanks for your notification. Unfortunately we are not able to replicate this. Please note the field in the latest version is defer not async. I suggest you to try with the latest version and see how it goes.

Regards.