SLIDER (BXSLIDER) EN MAGENTO – JQUERY + PROTOTYPE
En esta oportunidad y luego de buscar un poco mucho, pude solucionar un problema que tenía en un e-commerce que estoy armando hace ya un par de meses.
El problema que tenía es que al no querer utilizar algún plugin de slider que sea poco estilizable, me decidi por incluir el bxslider, que es el slide que utilizo siempre a la hora de poner un slide en algun sito para algun cliente, me parece súper eficiente, fácil de integrar y súper cuztomizable.
Al intentar incluir esto me encontré con el primer problema, "Prototype", si magento usa prototype, y esto es todo un tema para la gente que usa jquery ya que al tener los dos frameworks en el mismo sitio se arma un conflicto entre ellos, debido a que los 2 utilizan "$" para definir las funciones.
Para poder solucionar esto modifique el "jquery.js" y cambie "$" por "$j"
Después modifique también el "jquery.bxslider.js" haciendo lo mismo cambiando el "$" por el "$j"
Para insertarlo en magento abrí el archivo head.phtml e inserte el siguiente código:
<script type="text/javascript" src="http://(TUSITIO)/html/js/lib/jqueryprototipe/jquery.js"></script> //ACA INCLUIMOS EL JQUERY MODIFICADO
<script>
var $j = jQuery.noConflict(); // ACA INCLUIMOS EL "noConflict();" para no tener conflico con prototype
</script>
<script type="text/javascript" src="http://www.nexostudios.com/nexostudios.com/html/js/lib/jqueryprototipe/jquery.bxSlider.js"></script> // ACA INCLUIMOS EL BXSLIDER MODIFICADO
<script type="text/javascript"> // ACA INCLUIMOS EL SCRIPT PARA QUE FUNCIONE EL BXSLIDER
$j(document).ready(function(){
$j('#slider1').bxSlider({
auto: true,
pager: true,
speed: 500,
pause: 3000,
});
});
</script>
Y listo nuestro slider quedo funcionando en magento y sin conflictos.
Espero les sea de utilidad.
Acá les dejo los JS modificados:
Cualquier cosa comenten y les contestare en elo momento
Trackbacks deshabilitados.
Categorías
- Accesibilidad (5)
- Adobe (1)
- Buscadores (3)
- CSS (3)
- De Interes (7)
- E-commerce (1)
- HTML (6)
- Magento (1)
- Navegadores (4)
- PHP (1)
- Plug-In (1)
- SEO (7)
- Sitios web (4)