I\'ll keep this simple.... on my product pages I need to remove the prototype.js file and replace it with the latest version of prototype. So far using local.xml I have successf
Since local.xml is loaded at last by the magento system, so the xml mentioned there are merged at last. That may be the reason that your new prototype is loaded below other scripts.
Alternatively, you can override the Mage_Page_Block_Html_Head::getCssJsHtml() method and play with it.
Thanks
Mage_Page_Block_Html_Head $_data; holds the array of those items so I guess you can filter it for your own good. Default methods does not allow defining order of added items.
You can use the params element, with "data-group" HTML attribute in it, Magento will put items with "params" set after any items with no "params" set. You can use local.xml in your theme to ensure the order of these elements (I recommend to let Magento add its standard files first):
<action method="addJs">
<script>prototype/javascript0.js</script>
<params><![CDATA[data-group="js002"]]></params>
<!-- creates first group js002 -->
</action>
<action method="addJs">
<script>prototype/javascript1.js</script>
<params><![CDATA[data-group="js002"]]></params>
<!-- appends to created group js002, after javascript0 -->
</action>
<action method="addJs">
<script>prototype/javascript2.js</script>
<params><![CDATA[data-group="js001"]]></params>
<!-- creates first group js001 -->
</action>
<action method="addJs">
<script>prototype/javascript3.js</script>
<params><![CDATA[data-group="js001"]]></params>
<!-- appends to created group js001, after javascript2 -->
</action>
<action method="addJs">
<script>prototype/javascript4.js</script>
<params><![CDATA[data-group="js002"]]></params>
<!-- appends to created group js002, after javascript1 -->
</action>
<action method="addJs">
<script>prototype/javascript5.js</script>
<!-- no params supplied, will be rendered before any groups -->
</action>
The order in which elements with "params" set are rendered in only determined by the order in which actions are executed. Items are rendered grouped by the value of "params", so once group "js001" is defined by the first action (javascript2.js), successive actions with the same group name will append to that group, etc.
In the example above, the order of rendering will be:
Items added using addItem addJs, addCss, etc, are threated in the same way, however they differ (and will be super-grouped accordingly) by type (see order below), with each group in super-groups internally ordered as explained above:
I realize this post is pretty old but i stumbled on it while researching this problem, so i figured why not.
Not sure if this is the most elegant solution, but its working sufficiently well for us.
I basically created a new block in my local.xml
like this:
<block type="core/template" name="prehead" template="page/html/prehead/main.phtml" />
Then just modified my main layouts (1column.phtml and friends) to contain this:
<head>
<?php echo $this->getBlockHtml('prehead') ?>
<?php echo $this->getChildHtml('head') ?>
</head>
In main.phtml
I add my JS that I want to load first
<script type='text/javascript' src='<?php echo $this->getSkinUrl('js/require.js', array('_secure'=>true)); ?>'></script>
<script type='text/javascript' src='<?php echo $this->getSkinUrl('js/main.js', array('_secure'=>true)); ?>'></script>
This is convenient for us as well because it still allows us to change the main.js depending on what page we are on by doing something like this in local.xml
:
<checkout_onestep_index translate="label">
<label>One Step Checkout</label>
<block type="core/template" name="prehead" template="page/html/prehead/checkout.phtml" />
</checkout_onestep_index>
Hope it helps someone who happens to stumble on this.
-Ken
Ok here's my solution. First copy app\code\core\Mage\Page\Block\Html\head.php to app\code\local\Mage\Page\Block\Html\head.php
Then add this function to the file :
public function replaceItem($type, $name, $replace)
{
$newArray = array();
foreach($this->_data['items'] as $key => $value) {
if($key == $type.'/'.$name) {
$newArray[$type . '/'. $replace] = array(
'type' => $type,
'name' => $replace,
'params' => $value['params'],
'if' => $value['if'],
'cond' => $value['cond']);
} else {
$newArray[$key] = $value;
}
}
$this->_data['items'] = $newArray;
return $this;
}
Now in your .XML layout file include a line like this :
<action method="replaceItem"><type>js</type><name>prototype/prototype.js</name><replace>onestepcheckout/prototype/prototype.js</replace></action>
The parameters are exactly as for removeItem BUT now the replace file will be injected into the list in the same place as the original file. It will also inherit the same param, if and cond values. Please use this code carefully as I've only just written and done basic tests on it!
jquery conflict with Prototype in magento:
Simplest solution is to add at the end of your main jquery file.
jQuery.noConflict();
Or create your custom js file and add this line and also include this file after main js.