Magento adicionando CSS e JS inclui ao rodapé

Estou fazendo uma otimização Yslow do meu site Magento e estou tentando adicionar CSS e Js ao rodapé do site.

No momento, estou usando uma tag de referência principal no XML do layout e usando addJse addCssações para incluir todos os meus arquivos. Tentei trocar a referência principal pelo rodapé, mas ocorreu um erro ao tentar visualizar o site. Existe uma maneira de fazer isso local.xml ou isso precisa ser codificado no próprio arquivo de modelo de rodapé?

Eu sei que isso não é uma resposta para sua pergunta, mas algo que você pode querer considerar.

O Magento usa bastante javascript embutido, especialmente na página de detalhes do produto. Como esse javascript depende de scripts externos carregados no cabeçalho, você também precisará mover todos os scripts embutidos para arquivos externos e adicioná-los no rodapé.

Você pode ser mais rápido e melhor compactando o CSS e JS com as ferramentas incorporadas no Magento e usando a compressão gzip e os cabeçalhos de expiração remota para acelerá-los. Dessa forma, o 'atraso' causado pelo javascript e CSS seria reduzido ao mínimo, sem a necessidade de alterar o layout padrão das extensões Magento e de terceiros. Dessa forma, quando você atualiza seu Magento ou extensões, não precisa refazer todo o trabalho.

O .htaccess fornecido pelo projeto HTML5 boilerplate fornece essa compactação gzip e os cabeçalhos de expiração remota. Verifique http://inchoo.net/ecommerce/magento/magento-boilerplate/

O primeiro passo é criar um bloco chamado "pé", que é essencialmente o mesmo que "cabeça", mas você o produzirá em um local diferente. Você pode adicionar isso ao seu page.xml:

    <block type="page/html_head" name="foot" as="foot" template="page/html/foot.phtml"/>

Agora você pode adicionar JS / CSS (embora CSS no rodapé não seja recomendado) usando este comando em qualquer um dos seus arquivos XML:

    <reference name="foot">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/somefile.js</name>
        </action>
        <action method="addItem">
            <type>skin_js</type>
            <name>js/main.js</name>
        </action>
    </reference>

Dentro page/html/foot.phtml:

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>

Nos arquivos de modelo de sua página (por exemplo page/1column.phtml), você precisará gerar esse bloco antes da tag de fechamento do corpo:

    <?php echo $this->getChildHtml('foot') ?>

Se você estiver usando os modelos Magento padrão, receberá erros de JS. Pegue o mini formulário de pesquisa, por exemplo ( catalogsearch/form.mini.phtml). Possui este script embutido:

<script type="text/javascript">
    //<![CDATA[
    var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo $this->__('Search Redset...') ?>');
    //]]>
</script>

Isso será chamado assim que carregar, pois não está em nenhum manipulador de documentos prontos. Varien ainda não existe porque está no rodapé, então você recebe um erro. Você pode corrigir isso adicionando um manipulador de documento pronto ou movendo todas as JS embutidas dessa natureza para um arquivo externo que também é carregado no rodapé. Problemas como esse ocorrerão em todo o site, principalmente nas páginas de pagamento e configuráveis ​​do produto.

O outro problema que você pode encontrar é se estiver usando jQuery ao lado de Prototype no modo noConflict. Você precisará garantir que o jQuery seja carregado antes do Prototype, para que não ocorram conflitos.

Para Magento v1.6 + (necessidade de testar em versões mais antigas);

1 - crie um arquivo de modelo page/html/footer/extras.phtmlcom este conteúdo:

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

2 - Adicione este nó html ao seu xml de layout:

<reference name="before_body_end">
<block type="page/html_head" name="extra_js" as="extraJs" after="-" template="page/html/footer/extras.phtml">
    <action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
</block>

3 - É isso aí!