Como inserir JavaScript ou CSS Externo no Magento 1
Backend, Desenvolvimento, Magento 1
Atualizado em 14 de abril de 2020
Inserir JavaScript ou CSS externo no Magento 1 não é uma tarefa suportada nativamente. Pelo menos não de forma amigável e intuitiva.
Neste artigo veremos duas formas de se inserir um arquivo JS ou CSS externo dentro de uma ou mais páginas usando instruções de Layout XML.
As duas formas:
1. Usando core/text block
2. Usando módulo de terceiro
Pré-requisito: ter noções de Layout XML, layout handles, ou ter feito o curso Torne-se um desenvolvedor Magento Front End (com Bootstrap 4) do Magenteiro.
Veja também: como inserir JS Externo no Magento 2.
Usando core/text block
Uma forma bem comum e aceita de se inserir um JS ou CSS externo, ou mesmo de inserir um bloco JavaScript, é inserir um bloco do tipo core/text e depois chamar o método setText para definir seu conteúdo.
O bloco deve ser inserido dentro do head da página, da seguinte forma:
<reference name="head"> <block type="core/text" name="meuJSExterno"> <action method="setText"> <text> <![CDATA[<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>]]> </text> </action> </block> </reference>
Note que o texto é inserido como CDATA, a fim de evitar quebras de XML ou problemas na compilação/leitura do mesmo.
Basicamente, todo e qualquer conteúdo inserido dentro de <text> será exibido dentro do <head> da página.
O código acima deve ser inserido dentro do layout handle que deseja utilizar (ex: <default> para todas as páginas)
Usando módulo de terceiros
Uma outra forma de se adicionar um arquivo externo é com o módulo Inchoo_Xternal (também disponível no gitHub).
Com o uso deste módulo, podemos adicionar facilmente arquivos externos chamando o método addExternalItem ou remover um item recentemente adicionado com o método removeExternalItem.
Veja alguns exemplos:
<reference name="head">
<action method="addItem"><type>external_css</type><name>http://developer.yahoo.com/yui/build/reset/reset.css</name><params/></action>
<action method="addItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js</name><params/></action>
<action method="addExternalItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/imageloader/imageloader-min.js</name><params/></action>
<action method="addExternalItem"><type>external_css</type><name>http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css</name><params/></action>
</reference>
E para remover:
<reference name="head">
<action method="removeItem"><type>external_css</type><name>http://developer.yahoo.com/yui/build/reset/reset.css</name><params/></action>
<action method="removeItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js</name><params/></action>
<action method="removeExternalItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/imageloader/imageloader-min.js</name><params/></action>
<action method="removeExternalItem"><type>external_css</type><name>http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css</name><params/></action>
</reference>
Conclusão
Os dois jeitos são eficientes para se chegar em um resultado parecido. No entanto, o segundo jeito se mostra mais organizado e intuitivo. Apesar da dependência externa, foi meu favorito por longos anos. 🙂
Espero ter ajudado.
Grande abraço e até a próxima.
Artigo inspirado na minha contribuição nesta thread do StackOverflow em 2013.
- PagSeguro (PagBank) para Magento 1 recebe a Nova Geração - 9 de abril de 2024
- Recorrência no WooCommerce Sem Plugins Pagos - 28 de janeiro de 2024
- Chargeback. O que é, e como se livrar deles. - 19 de dezembro de 2023
Deixe seu comentário
[fbcomments url="https://www.magenteiro.com/blog/magento-1/javascript-css-externo/"]