MENU

Comments (0) Frontend, Magento

Como adicionar Javascript ao código

Criar templates e temas para Magento pode parecer algo confuso pra 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 pela Magento. E nesse caso existem duas maneiras de fazer.

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 do Magento, na pasta “js“.

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.

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:

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:

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:

Então antes dessa linha você poderia incluir seu javascript usando:

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:

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:

Como você pode ver é um código muito similar ao utilizado nos arquivos XML’s.

Ainda no backend do Magento navegue em:

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 do Magento e do seu navegador para visualizar as alterações.

E essa foi a terceira forma de inserir código javascript nas suas páginas.

Qualquer dúvida usem o Fórum da Escola Magento.

Sucesso!

Parceiros

Comments are closed.