¿Qué haría que mis scripts se carguen antes que el CSS en magento?

I am loading css and js in a magento template with something like this in the page.xml :

   <block type="page/html" name="root" output="toHtml" template="page/1column.phtml">
   <block type="page/html_head" name="head" as="head">
   <action method="addCss"><stylesheet>css/global_1.2.8.css</stylesheet></action>           
   <action method="addJs"><script>jquery/jquery-1.7.js</script></action>
   <action method="addJs"><script>colorbox/jquery.colorbox-min.js</script></action>
   <action method="addJs"><script>compressed/base-1.4.js</script></action>

and in the head.phtml

<?php echo $this->getCssJsHtml() ?>

But when I look at the source or watch the Net tab in firebug I see the js is getting loaded before the css. What would be causing this and how could I correct? I know I could move the js to the footer but I think that will cause other issues so I would like to keep it all in the head, just in the correct order.

I thought I would update this to reflect Romans answer. I checked the method that is in the version of Magento I am working with, Upgrading is not an option so maybe this is just a bug with that version?

# app/code/core/Mage/Page/Block/Html/Head.php

    public function getCssJsHtml()
//        return '';
        $lines = array();
        $baseJs = Mage::getBaseUrl('js');
        $html = '';

        $script = '<script type="text/javascript" src="%s" %s></script>';
        $stylesheet = '<link rel="stylesheet" type="text/css" href="%s" %s />';
        $alternate = '<link rel="alternate" type="%s" href="%s" %s />';

        foreach ($this->_data['items'] as $item) {
            if (!is_null($item['cond']) && !$this->getData($item['cond'])) {
            $if = !empty($item['if']) ? $item['if'] : '';
            switch ($item['type']) {
                case 'js':
                    #$lines[$if]['other'][] = sprintf($script, $baseJs.$item['name'], $item['params']);
                    $lines[$if]['script'][] = $item['name'];

                case 'js_css':
                    //proxying css will require real-time prepending path to all image urls, should we do it?
                    $lines[$if]['other'][] = sprintf($stylesheet, $baseJs.$item['name'], $item['params']);
                    #$lines[$if]['stylesheet'][] = $item['name'];

                case 'skin_js':
                    $lines[$if]['other'][] = sprintf($script, $this->getSkinUrl($item['name']), $item['params']);

                case 'skin_css':
                    $lines[$if]['other'][] = sprintf($stylesheet, $this->getSkinUrl($item['name']), $item['params']);

                case 'rss':
                    $lines[$if]['other'][] = sprintf($alternate, 'application/rss+xml'/*'text/xml' for IE?*/, $item['name'], $item['params']);

        foreach ($lines as $if=>$items) {
            if (!empty($if)) {
                $html .= '<!--[if '.$if.']>'."\n";
            if (!empty($items['script'])) {
                $scriptItems = array();
                if (Mage::getStoreConfigFlag('dev/js/merge_files')) {
                    $scriptItems = $this->getChunkedItems($items['script'], 'index.php?c=auto&amp;f=');
                } else {
                    $scriptItems = $items['script'];
                foreach ($scriptItems as $item) {
                    $html .= sprintf($script, $baseJs.$item, '') . "\n";
//                foreach (array_chunk($items['script'], 15) as $chunk) {
//                    $html .= sprintf($script, $baseJs.'index.php/x.js?f='.join(',',$chunk), '')."\n";
//                }
            if (!empty($items['stylesheet'])) {
                foreach ($this->getChunkedItems($items['stylesheet'], $baseJs.'index.php?c=auto&amp;f=') as $item) {
                    $html .= sprintf($stylesheet, $item, '')."\n";
//                foreach (array_chunk($items['stylesheet'], 15) as $chunk) {
//                    $html .= sprintf($stylesheet, $baseJs.'index.php/x.css?f='.join(',',$chunk), '')."\n";
//                }
            if (!empty($items['other'])) {
                $html .= join("\n", $items['other'])."\n";
            if (!empty($if)) {
                $html .= '<![endif]-->'."\n";

        return $html;

preguntado el 31 de enero de 12 a las 16:01

Hasta donde se getCssJsHtml() outputs actions in exactly the same order as they were added. Maybe you include some .js files before the line calling echo $this->getCssJsHtml() en tu head.phtml? -

Correcting myself about the ordering. Checked the source, css actions are bundled before js actions. Still, there's a chance that there are some "hardcoded" javascript include lines before the one calling echo $this->getCssJsHtml() in head.phtml. -

No there is nothing "hardcoded" they should all be coming from this xml. I am baffled. -

1 Respuestas

this order css then js hardcoded here app/code/core/Mage/Page/Block/Html/Head.php See method public function getCssJsHtml()

Como puedes ver ahí

// static and skin css
            $html .= $this->_prepareStaticAndSkinElements('<link rel="stylesheet" type="text/css" href="%s"%s />' . "\n",
                empty($items['js_css']) ? array() : $items['js_css'],
                empty($items['skin_css']) ? array() : $items['skin_css'],
                $shouldMergeCss ? array(Mage::getDesign(), 'getMergedCssUrl') : null

            // static and skin javascripts
            $html .= $this->_prepareStaticAndSkinElements('<script type="text/javascript" src="%s"%s></script>' . "\n",
                empty($items['js']) ? array() : $items['js'],
                empty($items['skin_js']) ? array() : $items['skin_js'],
                $shouldMergeJs ? array(Mage::getDesign(), 'getMergedJsUrl') : null

            // other stuff

So, if you really need to change this order - you need to overwrite this class and make own order.

Buena suerte.

Respondido el 31 de enero de 12 a las 23:01

Thanks Roman. So looking at this, default Magento should be loading CSS and then JS, correct? Any ideas where I would look to see why it is reversed on the site I am working on? - Zac

Yes, correct order is CSS then JS. In your case you should debug that method I wrote above. First of all you need to be sure that axactly THIS method prepare and display CSS and JS. Probably some custom extension affect this functionality. - novela

I'd really love to know if you ever got this resolved, since I'm dealing with the same problem right now. It was a bad idea for Magento to put this code inside its own class instead of simply putting it inside a template file where it can be easily changed. - Acuarela

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.