Blog

  • 1

    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!


  • Avatar de André Xori

    André Xori

    disse: 22/09/2011 às 22:27 pm
    O ideal seria trocar... mas é complicado pq a loja é toda baseada no Prototype... O Magento já é pesado... adicionar outra biblioteca Javascript pode ficar pior :(
  • Avatar de joão

    joão

    disse: 20/08/2011 às 14:16 pm
    não consegui fazer dowload