Magento adicionando CSS e JS inclui ao rodapé


15

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é?



11
Fornecer o erro que você recebeu ao tentar visualizar o site após a troca pode ajudar as pessoas a responder sua pergunta.
Alan Storm

3
Além de mover JS para o rodapé, tenho certeza de que não deseja mover CSS para o rodapé. Ele deve estar em <head>.
pspahn

Checkout @sonassi com links para o meu post mais antigo. Uma das soluções estava correta e funciona, mas lembre-se de obter vários arquivos JS mesclados ao ativar a mesclagem. Isso parece acontecer se você incluir o JS usando identificadores diferentes também.
precisa saber é o seguinte

CSS no pé. Eca na exibição da página ... E o JS deve ser feito apenas para inclusões externas que possam bloquear a exibição da página. Qualquer coisa servida fora do seu servidor deve estar na cabeça. É estrutura, estrutura é muito usada na montagem da página e deve estar lá antes que a página comece a renderizar. A maioria das recomendações seguidas cegamente, sem entender (culto à carga), por que você danifica.
Fiasco Labs

Respostas:


7

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/


2
É muito provável que os erros do OP sejam causados ​​pelo carregamento fora de ordem - a maioria dos scripts em linha requer prototype et al. Se você estiver carregando apenas isso no rodapé, é tarde demais. Remover o JS embutido seria o primeiro passo. Muito trabalho - boa sorte.
Kristof em Fooman,

4

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.


2

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í!


Método muito mais simples do que o anterior para adicionar js scripts antes da tag do corpo de fechamento
asherrard
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.