Existe alguma maneira de adicionar JS / CSS à página de rodapé?

Eu tenho um requisito personalizado para adicionar um JS e CSS específico relacionado ao rodapé do site . Existe alguma maneira no Magento pela qual eu possa adicioná-lo na seção de rodapé ?

O footerbloco não oferece nenhum suporte para js diretamente, como a cabeça.

Mas há um bloco com o nome no before_body_endqual você pode adicionar tudo o que deseja com modelo ou bloco de texto.

Gostaria de pensar no seu próprio modelo e no tipo de bloco Mage_Page_Block_Html_Head, então você pode usar o que o @Dexter recomendou.

Não, você precisa de algo assim, você não tem nenhum bloco page / html_head para se referir também:

<!-- get the block which we want our content in -->
<reference name="before_body_end">
    <!-- add another block of type page/html_head to have all the great functionality to add/remove css and js stuff -->
    <!-- it is important to set your own template, because the head block has a defined default template page/head.phtml which has all the stuff of the head. Using this will bring a lot of problems -->
    <block type="page/html_head" name="scripts_in_footer" template="YOUR TEMPLATE">
        <!-- add whatever you want as you are used to in the head via the standard magento api -->
        <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
    </block>
</reference>

E dentro do seu modelo, você precisa:

<?php // and to echo the whole stuff later in the template, you need to add the code, so the added js/Css files are echoed ?>
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>

A parte do cabeçalho e rodapé é renderizada pelo módulo Página no magento. Para ver os modelos de cabeçalho e rodapé, vá para

app / design / frontend/ <your_package> /<your_theme> /template / page / html / footer.phtml

Dê uma olhada em outros arquivos na pasta da página também. Lá você pode ver header.phtmlqual seção de cabeçalho de renderização de cada página. head.phtmluse para adicionar arquivos js e css aplicáveis ​​a todas as páginas do magento.

Veja também os arquivos na pasta da página. Esses arquivos serão renderizados para cada página de acordo com a especificação de layout de uma página específica.

Faça um estudo sério sobre este módulo. Vai lhe ajudar bastante.

editar

Você pode adicionar seus css e js através do page.xml. Eu acho que vai resolver o seu problema. Vamos para

app / design / frontend/ <your_package> /<your_theme> / layout / page.xml

e adicione esse trecho de código no seu defeault handle. (Você pode ver muitos arquivos js e css adicionados nesse identificador. Basta adicionar esse código abaixo desses códigos)

 //this will add your js
 <action method="addItem">
     <type>skin_js</type>
     <name>js/yourjsfile.js</name>
 </action>  
 //this will add your css file
 <action method="addItem">
     <type>skin_css</type>
     <name>js/yourcssfile.css</name>
 </action>

É isso aí. Agora, verifique se os arquivos js e css personalizados estão no local

  skin/frontend/<your_package> /<your_theme>/js/yourjsfile.js
  skin/frontend/<your_package> /<your_theme>/css/yourcssfile.css

Boa sorte para o seu trabalho.

Use XML para isso. Para adicionar Js no rodapé, chame a referência de rodapé. O código será algo parecido com isto

<reference name="footer">
   <action method="addJs"><script>js/file.js</script></action>
</reference>

Para adicionar JS na pasta de capa, você pode usar o seguinte código

    <reference name="footer">
    <action method="addItem"><type>skin_js</type><name>js/test.js</name></action>
</reference>

Para adicionar css, você pode usar o seguinte código xml

<reference name="footer">
    <action method="addCss"><stylesheet>css/layout.css</stylesheet></action>
</reference>

ou você também pode usar

<reference name="footer">
<action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
  </reference>

Para javascript, você já pensou em usar onload ou $ (document) .ready () do jquery?

Isso permitiria que você colocasse seu código no cabeçalho como na configuração típica, mas não o execute até que o conteúdo que seu js está fazendo referência seja carregado.

Seu código js filename.js seria semelhante a:

$(document).ready( function(){
   your custom js here
});

O código para o seu layout teria a seguinte aparência: (Obviamente, você precisará adicionar os diretórios apropriados conforme os tiver configurado.)

<reference name="head">
   <action method="addItem"><type>js</type><name>js/jquery/jquery.js</name></action>
   <action method="addItem"><type>js</type><name>js/filename.js</name></action>
</reference>

Sim, existe uma maneira, mas você deve adicionar via código, como abaixo, adicionar este código na parte inferior do arquivo 1column.phtml, pouco antes do final da <body>tag.

<script src="<?php echo $this->getSkinUrl('js/jquery.noConflict.js') ?>"></script>

Eu recomendo o módulo mediarox pagespeed para ajudar você a otimizar seu javascript (e css) e melhorar a classificação de informações do google pagespeed.

Ele funciona analisando a saída html do Magento e executando uma ação de recortar e colar no código para mover o javascript para a parte inferior do código html. O processo é rápido, mas é melhor usado em conjunto com um cache de página inteira para armazenar em cache as alterações html.

Mais informações sobre como este módulo funciona e podem ajudá-lo a melhorar a classificação da velocidade da página aqui:

http://blog.gaiterjones.com/magento-google-pagespeed-jscsshtmlminify-optimisation/