Criar templates e temas para a cor Magenta pode parecer algo confuso para quem não está acostumado com o sistema. Principalmente pelo fato de ter diversas maneiras de criar/estruturar uma página.
Vou mostrar neste post 3 (três) formas diferentes de incluir código javascript nas suas páginas. E não existe certo ou errado aqui, existe o que funciona e o que não funciona.
Então veja qual destes exemplos abaixo melhor se encaixa na construção do seu template, e mãos à obra.
1. No XML
Talvez a forma mais recomendada para inserir scripts na construção do seu tema, é o padrão adotado pelo sistema. E nesse caso existem duas maneiras de fazer.
<action method="addJs"> <script>varien/js.js</script> </action>
Usando o método “addJs“, que deve proceder à um bloco do tipo “page/html_head“, você informa o diretório/arquivo javascript do sistema.
Muita atenção ao que eu acabei de falar! Arquivo javascript DO SISTEMA.
Esse código vai procurar o diretório/arquivo na raiz da sua instalação, na pasta “js“.
<action method="addItem"> <type>skin_js</type> <name>js/seu_script.js</name> </action>
Já o método “addItem“, que também pertence à um bloco do tipo “page/html_head“, você especifica o tipo de arquivo que deseja adicionar: js, js_css, skin_js, skin_css, rss.
Ao informar “skin_js“, o xml entende que deve procurar o diretório/arquivo dentro do template/tema selecionado para sua visão de loja. Ou seja, ele vai fazer o mesmo que o código anterior (addJs), porém, ao invés de pegar um javascript do seu sistema, ele vai carregar o arquivo DO SEU TEMPLATE.
skin > frontend > default > default > js > seu_script.js
Lembrando que o diretório default/default você altera para o seu template/tema.
Só reforçando então, essas “actions” devem estar dentro de blocos:
<block type="page/html_head" name="head" as="head"> <action method="addItem"> <type>skin_js</type> <name>js/seu_script.js</name> </action> </block>
Para compreender melhor como funcionam os blocos do XML, leia o post: Entendendo o block do XML.
E essa foi a primeira forma de inserir código javascript nas suas páginas.
2. No phtml
É possível carregar arquivos js dentro das páginas phtml também. Em algumas situações isso pode ser útil, por exemplo, caso você precise carregar um javascript antes de todos os outros para evitar algum tipo de conflito.
Vamos fazer o teste usando o arquivo head.phtml:
app > design > frontend > base > default > template > page > html > head.phtml
Faça uma cópia desse arquivo base/default para default/default, ou então para o seu template/tema.
Veja que dentro desta página esse carrega todos os js e css informados no xml, usando o código:
<?php echo $this->getCssJsHtml() ?>
Então antes dessa linha você poderia incluir seu javascript usando:
<script type="text/javascript" src="<?=$this->getSkinUrl('js/seu_script.js')?>"></script>
Nesse caso não estamos usando nenhum código específico para javascript, e sim um getSkinUrl genérico, que carrega arquivos do seu tema. Apenas direcionamos ele para carregar seu script.
Se você não pretende carregar nenhum arquivo js, e sim escrever o código direto no phtml, ao menos tente seguir o padrão:
<script type="text/javascript">
//<![CDATA[
Event.observe(window, 'load', function(){
/*seu script aqui*/
});
//]]>
</script>
E essa foi a segunda forma de inserir código javascript nas suas páginas.
3. No CMS
E sempre que o sistema fornecer a opção de “Atualização de leiaute por XML“, você pode adicionar “peças” na construção do xml da página. Incluindo até mesmo código javascript, basta indicar a referência como mostrado no exemplo abaixo:
<reference name="head"> <action method="addItem"> <type>skin_js</type> <name>js/seu_script.js</name> </action> </reference>
Como você pode ver é um código muito similar ao utilizado nos arquivos XML’s.
Ainda no admin do Sistema navegue em:
Sistema > Configuração > Geral > Visual [Cabeçalho HTML]
Você vai encontrar o campo “Outros Scripts“, onde você pode informar o carregamento de um arquivo javascript externo ao seu site, por exemplo:
Dessa forma o arquivo sempre será carregado no header da sua página, depois que todos os outros arquivos forem carregados (xml, phtml, cms).
Lembrando sempre que depois que você inserir o javascript, seja por xml, por phtml, ou cms, limpe o cache da Loja e do seu navegador para visualizar as alterações.
E essa foi a terceira forma de inserir código javascript nas suas páginas.
Em vídeo
Preparei um post falando sobre o mesmo assunto, porém para a versão 2.x da cor Magenta, veja em: Como importar JS no M2.
Sucesso!