Modificar una plantilla de Prestashop

Un resumen sobre cómo se personaliza la plantilla que la aplicación Prestashop incluye por defecto.

Para Versión 1.6:
https://likonet.es/likonet/modificar-una-plantilla-de-prestashop-16/

La carpeta themes/nombre_de_la_plantilla tiene esta estructura:

//
Resumen el contenido: 4 carpetas, varios archivos de texto de extensión .tpl, un archivo index.php, un archivo es.php, y una imagen llamada preview.jpg.

La programación con smarty es una forma de separar el código HTML del código PHP con el fin de agilizar y mejorar la organización de una web de comercio electrónico. Así, en una plantilla encontraremos variables y funciones de la clase de PHP smarty y código HTML, que en el caso de Prestashop es XHMTL (tratamos algo sobre este estándar en este articulo sobre XHTML).

Para modificar el HTML, se modifican los archivos .tpl. Éstos son archivos de texto que contienen casi exclusivamente HTML y smarty. Recuerda que el parámetro $smarty->force_compile del archivo /config/smarty.config.inc.php debe estar en «true» para que los cambios se reflejen. (ver articulo sobre la velocidad de carga de la página para un poco más de información). Actualización: La versión 1.4 y posteriores incorporan un formulario en el Back Office para hacer esto menos tedioso a la hora de editar, se accede desde la pestaña Preferencias > Rendimiento.

Para cambiar el CSS haremos muchas modificaciones sobre el mismo archivo: /css/global.css. Es conveniente hacer copias de seguridad de este archivo y validarlo siempre que se pueda. Algunos módulos pueden incluir su propio archivo CSS, y tendremos que tener en cuenta su ruta para no cometer errores en el código.

Sobre los navegadores y la compatibilidad: Al personalizar el archivo global.css podemos encontrar incompatibilidades con navegadores y versiones de navegadores distintas. Esto se puede corregir de diversas maneras, una de ellas es incluir hojas de estilo distintas para cada navegador.

Imágenes: Las imágenes de la plantilla (fondos, botones…) están en la carpeta /img. Si queremos cambiar una imagen por otra que hayamos creado nosotros, debemos tener en cuenta sus características. algunos módulos puedes incluir su propia carpeta /img.

La imagen preview.jpg es la miniatura de la plantilla que se muestra en el Back-Office, en la lista de themes de nuestra tienda.

Sobre los módulos: Los archivos tpl de los módulos se encuentran en la carpeta /modules/nombre_del_módulo/nombre_del_módulo.tpl, para modificar el contenido y la estructura de los mismos hay que salir de la carpeta /themes y entrar en la carpeta de cada módulo; aunque el CSS se sigue cambiando desde global.css, a no ser que el módulo tenga un .css dentro de su carpeta.

El archivo es.php es generado por Prestashop, se usa para las traducciones y no es usual modificarlo manualmente.

– Se puede crear fácilmente una copia de la plantilla por defecto incluyendo su carpeta dentro de /themes. Cambiaremos de plantilla desde el Back Officee, Preferencias > Aspecto.
– Se recomienda tener siempre la plantilla original de la aplicación dentro de /themes, a salvo de los errores que podamos cometer.
– Puede que las modificaciones de una plantilla generen incompatibilidades después de una actualización de la versión de Prestashop (por ejemplo, de 1.3 a 1.4).