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.

Por ejemplo si deseamos mostrar “Más” (Esto es la descripción detallada del producto) 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.

https://javier-valero.es/wp-content/uploads/2016/06/ficha-producto-prestashop.pngBien 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 video-tutorial 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 encontraras 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}

Fijate 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 veras 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 tu y deja que veamos tus resultados poniendo tu comentario.

Saludos PrestaManicos!!

Video Tutorial

1 comentario

  1. Muy interesante tu artículo y fácil. En mi caso quiero dividir la sección en 2 columnas ya que no voy a colocar más descripción . Como puedo hacer eso?
    Saludos

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Información básica sobre protección de datos Ver más

  • Responsable Javier Valero.
  • Finalidad  Moderar los comentarios. Responder las consultas.
  • Legitimación Tu consentimiento.
  • Destinatarios  Javier Valero.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en la Política de Privacidad.

Publicar comentario