Si deseamos editar el estilo de nuestra página de inicio de Prestashop, es posible que lo que queramos hacer sea modificar la longitud del nombre de cada artículo (por defecto se muestra truncado a 27 caracteres), cambiar la descripción o variar los márgenes de cada elemento destacado. Para ello tendremos que editar el fichero ../modules/homefeatured/homefeatured.tpl. En el caso de que utilicemos algún template o plantilla de terceros, tendremos que comprobar que no existe otro fichero similar en la ruta ../themes/nombreplantilla/modules/. En el caso de que nuestro diseño incorpore este fichero, las modificaciones se deberán de realizar sobre éste y no sobre el de por defecto. Aclarado el fichero en dónde han de hacerse los cambios, procedemos con los mismos.

Cambiar la longitud del nombre de los productos: Como decíamos, por defecto se muestran los 27 primeros caracteres. Podemos cambiar este valor si nos dirigimos a la línea 42 aproximadamente y localizamos el siguiente código.

<h5><a href=”{$product.link}” title=”{$product.name|truncate:32:’…’|escape:’htmlall’:’UTF-8′}”>{$product.name|truncate:27:’…’|escape:’htmlall’:’UTF-8′}</a></h5>

Vemos que hay dos “truncate” limitando el tamaño a 32 y 27 caracteres. El primero de ellos (32) se aplica sobre el hover del texto, mientras que el segundo (27) define la longitud del texto del enlace. En nuestro caso cambiaremos el segundo valor por ’60’, dejándolo así:

<h5><a href=”{$product.link}” title=”{$product.name|truncate:32:’…’|escape:’htmlall’:’UTF-8′}”>{$product.name|truncate:60:’…’|escape:’htmlall’:’UTF-8′}</a></h5>

Eliminar la descripción de los productos: Para ello, procederemos a eliminar el código siguiente (línea 43 aprox).

<div><a href=”{$product.link}” title=”{l s=’More’ mod=’homefeatured’}”>{$product.description_short|strip_tags|truncate:320:’…’}</a></div>

Si no deseamos borrar la descripción, pero queremos cambiar el truncado, podemos proceder como anteriormente, modificando en este caso el valor ‘320’ en el ejemplo anterior.

Ajustar estilo por superposición de elementos: Al efectuar los cambios anteriores, es muy probable que dependiendo del tamaño asignado al título, se nos oculte o superponga sobre la descripción o image. Para subsanarlo, ampliaremos el tamaño de la caja de cada artículo. Nos dirigimos al fichero ‘Global.CSS’ (CSS de la platilla externa en caso de usarla, de lo contrario, hacerlo en el CSS por defecto) y buscamos lo siguiente:

#center_column div.products_block h5 {
 display: block;
 margin-top: 8px;
 height: 2.57em

Tendremos que modificar la altura (height) por un valor superior. En mi caso, tras hacer pruebas, me interesaba dejarlo a 3.8em.

NOTA IMPORTANTE: Estos cambios han sido probados satisfactoriamente sobre la versión 1.4. En versiones 1.4 o superiores, es necesario tener activado el ajuste de compilación forzada de Smarty. Para ello hay que ir a Preferencias/Rendimiento/Force Compile (yes). Una vez activada la opción, Prestashop forzará la compilación de los ficheros tpl en cada solicitud. Una vez que veamos que el cambio se ha realizado, procederemos a deshabilitarlo de nuevo.