Configurar pestañas de productos

[cajasdefruta]

Hola chic@s,

 

Ayer estuve intentando modificar las pestañas de información de productos para que en vez de aparecer una debajo de la otra, se situaran en horizontal y se fueran visualizando según pinchabas sobre ellas.

 

Esto concretamente:

 

http://mypresta.eu/en/art/prestashop-16/product-tabs.html

 

El caso es que debí tocar algo de los archivos product.tpl y global.css y ahora aparecen así y no se cómo dejarlas como estaban o si alguien sabe qué debo hacer para que se sitúen en horizontal como estaba intentando hacer...

 

Os adjunto una imagen de cómo está ahora.

 

Gracias por vuestra ayuda.

 

 

[tamu secreto]

Pues Prestashop utiliza Bootstrap 3, solo tiene que modificar las class para generar los tab.

Hay mucha informacion sobre bootstrap en la web.

un ejemplo rápido para hacer lo que desea seria:

<div class="container">
<ul class="nav nav-tabs">
  <li class="active"><a href="#tab_a" data-toggle="tab">UN TAB A </a></li>
  <li><a href="#tab_b" data-toggle="tab">OTRO TAB B</a></li>
  <li><a href="#tab_c" data-toggle="tab">ULTIMO TAB C</a></li>
</ul>
<div class="tab-content">
        <div class="tab-pane fade active" id="tab_a">
            <h4>TITULO NOMBRE DE PRODUCTO</h4>
            <p>DESCRIPCION</p>
        </div>
        <div class="tab-pane fade" id="tab_b">
            <h4>OTRA INFORMACION</h4>
            <p>ACA INFORMACION</p>
        </div>
        <div class="tab-pane fade" id="tab_c">
            <h4>EL OTRO TAB C</h4>
            <p>INFORMACION DEL TAB C</p>
        </div>

</div>
</div>

Es un html basico, pero recuerde que tiene que integrarlo a smarty y utilizando las variables correctas del archvio tpl.

 

Ups, tuve que editar!!

me habia olvidado, tiene que tener encuenta que los valores del atributo class es muy importante para los diseños responsive, en pocas palabras si los omite puede que en ciertas resoluciones no se vean correctamente, use los valores que trae prestashop.

 

Saludos

Edited December 6, 2014 by tamu secreto (see edit history)

[cajasdefruta]

Perdona mi ignorancia Tamu, es que soy bastante novato en esto.

 

Te estas refiriendo a colocarlas en horizontal una junto a la otra o por el contrario, una debajo de la otra?

 

Mi intención es dejarlas en horizontal pero no sé qué modificar en product.tpl exactamente.

 

Me podrías especificar mas?

[tamu secreto]

pues copie el codigo que le di y peguelo en el tpl de productos luego tielde forzar compilacion en la back y observe si hace lo que usted necesita

si lo hace tiene que integrar el codigo.

 

saludos

[cajasdefruta]

Dos dudas:

 

En que parte de product.tpl lo copio exactamente?

 

y como se supone que integro el código?