Jump to content

Tabs en Ficha de Producto


jujomago

Recommended Posts

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 :D

Edited by jujomago (see edit history)
Link to comment
Share on other sites

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 :D

 

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

Edited by jujomago (see edit history)
Link to comment
Share on other sites

  • 1 month later...

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...