Tabs en Ficha de Producto

[jujomago]

Buenas, soy nuevo en prestashop. Necesitaba el feature de tabs en la ficha de producto, vi algunos tutos donde ahabia que modificar el product.tpl, lo que no me funciono, así que lo solucione a mi forma con javascript y css. LO COMPARTO POR SI ALGUIEN QUIERE UNA SOLUCION RAPIDA.

 

Saludos.

 

 

JS // yo lo puse en el mismo archivo product.tpl pero supongo que se podra colocar en algun otro archivo js 

 

<script>
	$(document).ready(function(){
			if($('body').attr('id')=='product'){

				var $sections=$("#center_column").find('section.page-product-box').not('.blockproductscategory');
				$sections.not(':first').hide();

				var tabs_ul=$("<ul class='tabs_ul'>");
				var lis_html='';
				for (var i = 0; i < $sections.length ;  i++) {
					var className="tab_"+(i+1);
					$sections.eq(i).addClass(className);
					var headering_block=$sections.eq(i).find('h3.page-product-heading').hide();
					lis_html+="<li id='"+className+"'>"+headering_block.text()+"</li>";
				}
				tabs_ul.html(lis_html);
				$("#center_column .primary_block").after(tabs_ul);
				tabs_ul.find(':first').addClass('activo');
				tabs_ul.find('li').on('click',function(){
					$(this).addClass('activo').siblings().removeClass('activo');
					var block_class_seach=$(this).attr('id');
					$sections.hide().filter('.'+block_class_seach).show();
					});

			}
	});
</script>

CSS  en global.css

.page-product-box {
  padding: 20px 10px;
  border: 1px solid #DADADA;
  margin-bottom: 10px;
  background: #FFF;
}

.tabs_ul{
	clear:both;
	margin:0;
}
.tabs_ul li{
		padding: 10px 15px;
		background: #ddd;
		color: #222;
		display: inline-block; 
		cursor:pointer; 
}
.tabs_ul li:activo{
    background:#222;
    color: #ddd;
}

ESO ES TODO

Edited April 24, 2015 by jujomago (see edit history)

[Rolige]

Muy buena la modificacion, especialmente porque no requiere cambios en el tpl, de cualquier manera aqui les dejo otra del compañero vekia un poco mas compleja pero que ademas es responsiva: http://mypresta.eu/en/art/prestashop-16/product-tabs.html

[jujomago]

lo que propuse tambien sigue siendo responsive, para los tabs unicamente habria que poner un media querie para que ocupe el ancho total en moviles, pero sin esa modificacion igual no se ve nada mal ya que tiene display:inline-block, los tabs se pasan habia abajo

 

Ah por cierto, ese ejemplo que pusiste en el link, es el que no me funciono, y bloques no funcionan.

Edited April 24, 2015 by jujomago (see edit history)

[papuki]

Hola:

 

Se podría poner en una pestaña la opción de descargas que actualmente (por lo menos en mi caso) aparece en la parte baja de la ficha del artículo? Estoy con la versión 1.6.14 y el theme por defecto.

 

Si es posible y me podéis ayudar, os rogaría que la explicación para nivel infantil, ya que aún no he pasado a primaria!

 

Gracias y saludos

papuki

[papuki]

Hola de nuevo:

 

Aunque no es la solución que consultaba, he encontrado esta opción para mover DESCARGAS hacia arriba. Lo explican aquí: http://bit.ly/1FOeMj7

Es más fácil preguntar que buscar !

 

Saludos

papuki

[Rolige]

Con el codigo del compañero jujomago deberia hacerlo automaticamente (si estas usando el tema default sin cambios en el product.tpl)