viernes, 22 de junio de 2012

Slider en Magento
















http://www.magentocommerce.com/magento-connect/media/catalog/product/cache/9/image/468x300/9df78eab33525d08d6e5fb8d27136e95/f/i/fishpigs_ibanners_a031d90f1fc0e2220ddc23967b05e270_ibanners-box.png
Fishpigs_iBanners     funciona bien y lo mas importante es que no le resta velocidad a la tienda . la instalación es por magento connect. 
Su extensión.
community/Fishpigs_iBanners
Solo hay que adaptar el tamaño de las imágenes para que quede bien cuadrado .











Para instalar  este  slider en magento basta con copiar este  script  en el siguiente directorio header.phtml del tema que este usando 

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider1').bxSlider();
  });

$(function(){
  $('#slider1').bxSlider({
    ticker: true,
    tickerSpeed:9500
  });
});
</script>
pegamos  este otro código     en el lugar donde quieres que sea   visible(top, header o entre el contenido )

por ejemplo si quieres que aparezca en el contenido vas  hasta cms/pages/Home page /Content 
y pegas el siguiente codigo.

<div id="slider1">
  <div>Slide one content</div>
  <div>Slide two content</div>
  <div>Slide three content</div>
  <div>And so on...</div>
</div>




 incluyendo cada imagen a usar entre las etiquetas div 
<div>Tu imagen</div>




Combina cada una de las opciones siguientes dependido de lo que necesites


 si te fijas  en la web del autor ,    sugirió  este  script


 

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider1').bxSlider();
  });


 yo le sume esta otra parte que esta en adicionales  de la misma pagina.


$(function(){
  $('#slider1').bxSlider({
    ticker: true,
    tickerSpeed:9500
  });
});
</script>



que seria la velocidad sobre la que correrá de forma automática  quedando al final como esta al principio de la entrada  y así suma  o agrega cada fragmento dependiendo de lo que necesites  Múltiples opciones para el sliders.  Correrlo en forma automática , enumerado.

Importante si usas jquery en  magento tienes que evitar  conflicto   



 

 instalemos este mismo slider pero a través de widgets.

teniendo en cuenta que para distintos idiomas hay que crear un bloque para cada uno de ellos de resto solo funcionara en uno solo.

Primero crearemos un  static block donde llanearemos los campos de la siguiente manera






Titulo del block:baners
Estado: permitir 

contenido:<div id="slider1">
  <div>Slide one content</div>
  <div>Slide two content</div>
  <div>Slide three content</div>
  <div>And so on...</div>
</div>
























































































salvamos

en  cms /widgets







Llenamos los campos 


tipo:cms static block
Paquete de Diseño / Tema: tu tema
Instancia Widget Título:sliders
Orden de Clasificación:puedes dejarla como esta 


 nos situamos   en 


    add new layout opdate 

llenamos los campos 

display on : All Pages   (si quiere que salga  en todas las paginas )

Block Reference: Page top (o  donde tu quieras el sliders )

después de eso entramos   en   widget options




 seleccionamos    baners





 guardamos 

y listo nuestro sliders quedo  funcionando. Esto es para un sliders o baners en la parte central de arriba de tu tema puedes seleccionar cualquier lugar y crear tantos wingest como quieras para las columnas de la izquierda , derecha , menú  pie de pagina etc .


No olvides que tienes que introducir el script en header.phtml 






Próximo slider3.
Otro slider que te podría interesar es este Auguria slider
 (Instalación automática )





funciona perfectamente  lo recomiendo al 100% ,la instalación es  a través  de MagentoConnect .


  Es ligero,rápido y de fácil instalación 



este es la conexión


community/Auguria_Sliders






y eso es todo   un saludo!