Agregar jQuery a Magento

Question

¿Cuál es la forma recomendada de agregar jQuery (o cualquier script) ANTES del resto de los scripts que vienen con Magento utilizando local.xml?

He tratado de usar (en local.xml):

<reference name="head"> 
    <action method="addItem"> 
     <type>skin_js</type> 
     <script>js/jquery-1.6.4.js</script> 
    </action> 
</reference> 

pero esto termina la adición de jQuery para el final de las secuencias de comandos que se agregan por Magento en page.xml en el paquete base. Incluso he intentado quitar todos los scripts usando:

<action method="removeItem"> 
... 
</action> 

para eliminar todos los scripts que se agregaron en page.xml y luego volver a agregar en local.xml en el orden que los necesito para estar en (jQuery primero), pero de alguna manera, terminan en el mismo orden (con jQuery en último lugar).

He revisado el código de Magento y verificado que las secuencias de comandos se eliminan y luego vuelven a agregarse a $ this -> _ data ['items'] en Mage_Page_Block_Html_Head, pero en algún momento, cuando se agregan al página, se agregaron con jQuery al final.

Supongo que tiene que haber una forma más elegante de hacerlo, pero todavía no lo he encontrado en Google. Todo lo que he encontrado recomienda modificar page.xml directamente, lo que he leído en otro lugar no es una buena idea.

Answer 1

mejor es utilizar la red de distribución de contenidos que será mejor en el rendimiento/velocidad para su página web.

que en su mayoría acaba de abrir la plantilla/página/html/head.phtml y justo antes de

<?php echo $this->getCssJsHtml() ?> 
<?php echo $this->getChildHtml() ?> 

agrego:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 

También asegúrese de ejecutar el método jQuery.noConflict() y siempre use el nombre jQuery completo en lugar del $ (signo de dólar) para evitar conflictos con el prototipo;)

Answer 2

Usted puede agregar en sus archivos de bloque con $this->getLayout()->getBlock('head')->addJs('path/to/jquery.js'); en el método _prepareLayout()

Una advertencia, Magento utiliza prototipo, por lo que tendrá que asegurarse de configurar jQuery a otra variable que no sea simplemente $. La adición de este a la página de hecho el trabajo para mí:

var $j=jQuery.noConflict(); 

A continuación, sólo tiene que utilizar $j en el que normalmente se utiliza $

Answer 3

Mi forma preferida (y la más flexible) de hacer esto es a través de XML usando local.xml, dos archivos separados de Javascript y un nuevo archivo que crearemos. El primer archivo Javascript es jQuery en sí mismo, completamente sin modificaciones. El segundo archivo que llamo no-conflict.js y contiene sólo una línea:

jQuery.noConflict(); 

Ahora añadimos ambos archivos, junto con un nuevo bloque, a la sección de la cabeza de nuestra local.xml:

<reference name="head"> 
     <block type="page/html_head" name="topScripts" template="page/html/top_scripts.phtml" before="head"> 
      <action method="addItem"> 
       <type>skin_js</type> 
       <name>js/jquery-1.7.2.min.js</name> 
      </action> 
      <action method="addItem"> 
       <type>skin_js</type> 
       <name>js/no-conflict.js</name> 
      </action> 
     </block> 
    </reference> 

no-conflict.js es necesario para permitir que jQuery funcione junto con Prototype, el marco de Javascript incluido en Magento de forma predeterminada.Mantener jQuery y un archivo no-conflict separados le permite actualizar o degradar jQuery según sea necesario sin la necesidad de editar el archivo jQuery para incluir el método noConflict().

En nuestro XML creamos un nuevo bloque (topScripts) con el archivo de plantilla establecido en top_scripts.phtml.

Navegue hasta /app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/ y cree este nuevo archivo. Contendrá una línea:

<?php echo $this->getCssJsHtml(); ?>

Ahora editar /app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/head.phtml.

Encuentra la línea <?php echo $this->getCssJsHtml() ?> en su head.phtml y añadir esta línea directamente sobre ella:

<?php echo $this->getChildHtml('topScripts') ?>

Usted tiene ahora correctamente añade jQuery antes que cualquier otro Magento Javascript.

Answer 4

Como una forma alternativa, y en lugar de editar manualmente los archivos de Magento cada vez, simplemente puede añadir jQuery usando esta extensión: http://www.intersales.de/shop/magento-magejquery.html

lo que hace por ti es descargar la versión de jQuery que especifique e instalar todos los archivos necesarios automáticamente al mismo tiempo que agrega las referencias a su plantilla. En el back-end, puede especificar la versión deseada y también activar la configuración sin conflicto.