3

Okay I've been doing JS merges for some time now and still can't figure out the logic behind making a successful merge. It comes down to repositioning libraries upwards and downwars on merge list. Sometimes jquery must be on top, sometimes it doesn't. Sometimes fancybox needs to be added as addJs, sometimes as addItem.

So, what is in your experience causing JS libraries to break when you use Magento's merge JS? Are there any rules for sucessful merge?

UPDATE: Just now in my local.xml I moved from

<action method="addItem"><type>skin_js</type><name>js/magiczoomplus.js</name></action>

to

<action method="addJs"><script>jquery/magiczoomplus.js</script></action>

and that solved the magiczoomplus error I was getting on the page. How so?

I'm trying to understand this problem so I can better tackle it in the future

5 Answers 5

7

you need to understand the core principle here what conflicts between javascript libraries and what not.

in case of jQuery and Prototype conflict and in Magento:

  • always include jQuery before any other script on your page , before Prototype is a must
  • add jQuery.noConflict(); call directly to the end of your jQuery library file
  • make sure that none of your jQuery based scripts are not using $ as method name (essence of the conflict here)
3
  • that's not the problem - I always use jQuery noConflict, and always before prototype
    – srgb
    Jun 27, 2012 at 13:59
  • 1
    I must say I never have referenced jQuery before Prototype at all.. so on my head section, prototype is first, scriptaculous, validation.js.. all other prototype-related JS.. THEN follows jQuery.latest.js, jQuery.noconflict.js, then jQuery plugins like magiczoom etc. Optimized thereafter using grouping specified in my answer. Jul 1, 2012 at 23:10
  • Good for you :) I'm a support person on a busy support line :) and due that I have overviewed ~4000 magento sites by today. 90% who had included jQuery the way you described had issues with classic conflict in some way or another. But I guess most of them are installing extensions back and forth and don't pay attention to details anyway. It is just how javascript is included in your browser and then executed. Isolate , control the flow and succeed, so simple.
    – Anton S
    Jul 2, 2012 at 8:02
2

If there are any problems after Javascript merging is enabled, I always tried to replace minimized Javascript files with non-minimized versions of those files. And it always solved the problems. (I don't know why there are problems with minimized files)

1

Not alot of options to actually fix merging but

1.) Use group-ing in your local.xml files to ensure a better merge.

http://fishpig.co.uk/blog/why-you-shouldnt-merge-javascript-in-magento.html

2.) Abandon Magento's built-in merging altogether and use Fooman_Speedster instead.

http://www.magentocommerce.com/magento-connect/fooman-speedster.html

The second one has worked perfectly for me so far. I'm using jQuery libraries and even more (Handlebars, etc) and i'm having no problems whatsoever.

2
  • Speedster breaks website when disabled, also magento's merge when server compressed results with better performance then speedster. Thanks for the grouping article though, it was helpful.
    – srgb
    Jul 1, 2012 at 14:31
  • Ah yes, that's true.. but I don't see why you have to disable Speedster. It also does not get in the way of development as far as I have experienced. It does load a tad bit slower when you do CSS/JS changes but that's just because it only 'recompiles' changed CSS into the cache. Jul 1, 2012 at 23:07
1

What worked for me was moving the jQuery include after prototype and adding jQuery.noConflict(); after the jQuery include.

1

What works for me after all this time, is:

  1. Always putting jQuery on top, followed by noConflict
  2. Toggling between compressed and uncompressed version of included JS (if you enable gzip compression you should not be worried about the final size - it will be compressed one way or another)
  3. Toggling between addItem and addJs inclusion methods
  4. Randomly repositioning erroring libraries

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.