[ Magento ] Como utilizar jQuery no Magento?

Bom, começando pelo fato de o Magento ser de longe a melhor solução para ecommerce que conheço…
muito me desanimou quando constatei que o mesmo é escrito utilizando prototype e outras bibliotecas javascript e ‘não’ jQuery!

Neste post vamos ver como adicionar a biblioteca jQuery ao seu site.

O processo é bem simples.

No seu tema, abra o arquivo page.xml, geralmente em:


;mude de acordo com a localização do seu arquivo page.xml)
app/design/frontend/default/meu_tema/layout/ 

Procure pela seção:

 lang="xml
<block type="page/html_head" name="head" as="head">

e logo abaixo de:

 lang="xml
<action method="addJs"><script>prototype/prototype.js</script></action>

adicione a biblioteca jQuery

 lang="xml
<action method="addJs"><script>jquery/jquery-1.8.0.min.js</script></action>

Nós passamos ali o caminho “jquery/”, por isto você deverá criar a pasta “jquery” no diretório utilizado pelo Magento para armazenar os arquivos javascritp, em:


DIRETORIO_INSTALACAO/js/jquery

Como o Magento utiliza o Prototype, e o prototype também utiliza a variável $, é preciso que você utilize o método jQuery.NoConflict().

 lang="js
<script type="text/javascript">
  if( jQuery ) {
      // Chamada para não gerar conflito com jquery x prototype
      jQuery.noConflict();
      jQuery(function(){
          // Criamos um elemento no topo da página
          jQuery('body')
              .prepend(
               '<h1 id="jquery-h1">Eu carreguei a biblioteca jQuery!</h1>'
           );
           // Ocultamos com prototype
           $('jquery-h1').hide(); 
      });
  }  
</script>

Bom é isso aí. Qualquer dúvida é só chamar!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *