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!
