Blog

Nesse tutorial vamos aprender como implementar a biblioteca jQuery no Magento ao lado da biblioteca padrão que ele utiliza, a Prototype.

Temos duas formas para essa implementação a primeira é hospedando a biblioteca na pasta skin de nosso tema e a outra utilizando o Google CDN.

Faça o download da jQuery em jquery.com e copie para o diretóriorio: skin/frontend/default/seu_tema/js

Agora vamos incluir a chamada da jQuery no arquivo layout/page.xml no block head:

<action method="addItem"><type>skin_js</type><name>js/jquery.js</name></action>

No arquivo: app/design/frontend/default/your_theme/templates/page/html/head.phtml vamos inclur a função noConflict do jQuery para que a mesma possa rodar ao lado da Prototype sem conflitos. que deve ficar mais ou menos assim:

<title><?php echo $this->getTitle() ?></title>
 
<meta http-equiv="Content-Type" content="<?php echo $this->getContentType() ?>" />
<meta name="description" content="<?php echo htmlspecialchars($this->getDescription()) ?>" />
<meta name="keywords" content="<?php echo htmlspecialchars($this->getKeywords()) ?>" />
<meta name="robots" content="<?php echo htmlspecialchars($this->getRobots()) ?>" />
 
<?php echo $this->getChildHtml() ?>
 
<link rel="icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon" />
 
<script type="text/javascript">
//<![CDATA[
    var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
    var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
//]]>
</script>

<?php echo $this->getCssJsHtml() ?>
 
<!-- Adicionando a jQuery pelo Google CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<!-- Adicionando a função noConflict -->

<script type="text/javascript">
//<![CDATA[
	 var $j = jQuery.noConflict();
//]]>
</script>
<!-- ************* -->
 
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>

Agora seu tema já está com a jQuery implementada e funcionando!