Showing results for 
Search instead for 
Did you mean: 

js/css combine groups

js/css combine groups



I've read it somewhere that we can make the js/cs merge function work a bit more effectively, if we <group> them like this:



<action method="addJs"><script>prototype/prototype.js</script><group>general</group></action>
<action method="addJs"><script>lib/jquery/jquery-1.11.2.min.js</script><group>general</group></action>
<action method="addJs"><script>lib/jquery/noconflict.js</script><group>general</group></action>


It works fine, I choosed <group>product</group> for the additional scripts loaded on the product page, so it loads two separate files:



<script type="text/javascript" src="" general></script>
<script type="text/javascript" src="" product></script>


But the problem is:
It puts the name of the group to the end of the script tag, and it causes errors during w3c validation.


Is there any way to get rid of them? Or am I doing something wrong with the <group> tags?


Thanks for your help.


Tags (2)

Re: js/css combine groups

sorry for the late reply, just encountered it myself and got a way around it Smiley Happy


you can simply name the group: async="async" or defer="defer"

what name you use depends on how the script should be called, async or after the page finished loading (defer)


Hope that'll be handy to someone


Note: Using this solution gives you a limitation of groups (2) but you wont need any changes in the Magento code or a extension

Re: js/css combine groups

Thanks for your suggestion!


Actually I did something similar: as our website is using HTML 5 standards, I created some data-* attributes, like data-js="general" and data-js="products". The second one also got the async="async", but I'm afrad using it to the general javascripts - those would need a deeper test.