Modifica la ficha de producto

En este post voy a mostrarte una cosa interesante de la ficha de producto  que puede ayudarte a organizar mejor la info del producto.

Me refiero como no, a las pestañas “Más”, “Ficha técnica” aunque cabe decir que esto que te explico puede verse bien dependiendo de cuantos bloques quieras poner, puesto que utilizaremos las columnas que Bootstrap nos ofrece por medio de su sistema de rejilla.

Si deseamos mostrar “Más”  y “Ficha técnica” ambas aparejadas en forma horizontal como si de bloques de párrafo se tratase (mejor que en modo vertical que es la forma que por defecto se muestra) entonces emplearemos el sistema que Bootstrap nos ofrece para ello.

Bien, primero de todo y de una forma muy sencilla lograremos que estas dos partes se agrupen como te he comentado, así que te cuento como hacerlo (igualmente tienes un videotutorial para que me veas hacerlo)

Manos a la obra, ¿Qué archivos vamos a tocar? Bueno antes que nada aunque no tengas conocimientos de programación te resultara sencillo.

Abrimos el archivo product.tpl de la plantilla default-bootstrap, (Esto está probado en la plantilla de PrestaShop, no doy garantía para las de pago, puesto que puede ser diferente)

Vamos a buscar esta etiqueta

<section class=»page-product-box»>

La clase page-product-box la lleva en todas las pestañas que están relacionadas con el producto, como puede ser, descripción, reseñas, ficha técnica, personalización, descarga, características, Volumen por descuentos,  etc.

IMPORTANTE: Ojo porque si utilizas todas estas entonces deberás de pensar en agrupar en varias filas, puesto que Bootstrap utiliza varios anchos según el tipo de columna que utilices, por ejemplo col-sm-6 ocuparía el 50% del ancho disponible.

En este tutorial solo he tenido en cuenta los campos Más y Ficha técnica.

Bien sobre la línea 469 encontrarás esto:

{if isset($product) && $product->description}

                                   <!-- More info -->

                                   <section class="page-product-box">

                                               <h3 class="page-product-heading">{l s='More info'}</h3>

                                               <!-- full description -->

                                               <div  class="rte">{$product->description}</div>

                                   </section>

                                   <!--end  More info -->

                       {/if}

Fíjate en la etiqueta <section> esta lleva la clase page-product-box pues la dejamos así

<section class=»page-product-box col-sm-6«>

Ya hemos hecho el primer paso, si ahora intentas ver el resultado verás que todo está movido en tu plantilla o se solapa.

Ahora nos queda el 50% restante:

{if isset($features) && $features}

<!-- Data sheet -->

<section class="page-product-box">

<h3 class="page-product-heading">{l s='Data sheet'}</h3>

<table class="table-data-sheet">

{foreach from=$features item=feature}

<tr class="{cycle values="odd,even"}">

{if isset($feature.value)}

<td>{$feature.name|escape:'html':'UTF-8'}</td>

<td>{$feature.value|escape:'html':'UTF-8'}</td>

{/if}

</tr>

{/foreach}

</table>

</section>

<!--end Data sheet -->

{/if}

Esto corresponde a Ficha técnica, y colocamos de nuevo lo mismo que hemos hecho anteriormente.

<section class=»page-product-box col-sm-6«>

Listo con esto ya tenemos el resultado que queríamos.

Si quieres colocar por ejemplo una tercera columna debes de hacer lo mismo, pero cambiando el formato en vez de col-sm-6 puedes poner col-sm-4, ya que 4×3= 12 y 12 es el 100% del ancho que tenga.

Si necesitas más info consulta la página de Bootstrap y los formatos.

Espero que te haya servido de inspiración para tu diseño web en tu tienda online.

Prueba ahora tú y deja que veamos tus resultados poniendo tu comentario.

¡Saludos, PrestaManicos!!

videotutorial