Prestashop: Crear un nuevo Theme

Introducción

A la hora de publicar nuestra web, tenemos que incidir en diferenciarla del resto, sobre todo si se trata de un software opensource como lo es Prestashop, así que debemos personalizar nuestra tienda, para que no sea como las demás, así que no podemos dejar el tema (theme) o plantilla que viene instalado por defecto en Prestashop.

En la página oficial de Prestashop existen un gran número de themes para instalar, casi todos de pago, sobre todo si son de la versión 1.5, de los cuales hay muy pocos gratuitos. Una opción sencilla puede ser cambiar los ficheros CSS para cambiar los colores, pero seguro que necesitaremos una mayor personalización.

Vamos a ver como crear un nuevo tema y como modifcarlo, por ejemplo si solo queremos visualizar una columna lateral, en vez de la dos que se muestran por defecto.

Estructura de Ficheros.

Pues empezamos nuevamente por la estructura de ficheros, como ya vimos en la entrada anterior de Prestashop, los temas se encuentran en el directorio themes. Si entramos en el directorio veremos tal cual esta en la siguiente imagen, donde podemos ver un directorio default que es el aspecto que viene por defecto. Es recomendable no borrar este directorio y tomarlo como base de nuestras próximas modificaciones.

Creando un nuevo Tema

Así pues vamos a crear un nuevo tema basandones en el que Prestashop nos proporciona por defecto. Podemos copiar el directorio, pero vamos a realizarlos desde el back-end de la aplicación. Vamos Preferencias/Temas y seleccionamos añadir nuevo, veremos la siguiente pantalla.

Indicamos el nombre que queremos darle y el directorio donde se encuentra, importante seleccionar el tema por defecto para que copie los archivos como se ve en la imagen anterior. Esto nos ha creado el directorio para nuestro propio tema, donde ya podremos modificar todo lo que queremos sin peligro de destrozar nada que ya esta funcionando.

Entramos en el directorio de nuestro tema y vemos una serie de ficheros y directorios, así que toca darle un vistazo a ver que son todos esos ficheros.

Lo primero que vemos es que hay muchos ficheros tpl que son las plantillas Smarty que se utilizan para visualizar la información, los diferentes ficheros son para visualizar diferntes pantallas del programa. Entre todas las plantillas existe una imganes preview.jpg, que se usa en el back-end para mostarar una pequeña previsualización del tema, debe ser de 180x202px. También hay una serie de directorios:

• /cache : ficheros temporales que son generados y se pueden reutilizar.
• /css : ficheros CSS del tema.
• /img : imagenes que utiliza el tema.
• /js : ficheros javascript que utiliza el tema.
• /lang : contiene un subdirectorio por idioma al que esta traducido.
• /mobile : versión para móvil.
• /mails : plantillas que sustituyen a las que vienen por defecto en Prestashop para generar los mails.
• /modules : modulos que usa el tema, pueden ser nuevos o que sobreescriben los existentes por otros.
• /pdf : plantillas que sustituyen a las que vienen por defecto en Prestashop para generar los PDFs.

Ahora que ya hemos visto la estructura de una plantilla vamos a ver como modificar la visualización de la misma. Debemos buscar los ficheros header.tpl y foot.tpl, juntando estos dos ficheros obtenemos la estructura del html que utiliza la plantilla. Aquí podemos cambiar la estructura de la misma, la cabecera, si queremos que tenga solo un columna, dos o las que queramos.

Por ejemplo si queremos eliminar la columna de la izquierda debemos, abrimos el fichero header.tpl y buscamos la sección de la derecha, si la eliminanos ya no se visualizará. Deberás ajustar el CSS para que las columnas que se visualizan aprovechen en nuevo espacio.

Si visualizamos los ficheros veremos una serie de Hooks (ganchos), que Prestashop utiliza para "enganchar" los elementos a visulizar, por defectos vienen una serie de Hooks definidos, pero nosotros podemos definir nuevos si nos hiciesen falta.

Si miramos el código de la columna derecha:

 
<div id="right_column" class="column grid_2 omega">
 {$HOOK_RIGHT_COLUMN}
</div>

Vemos que se define un div y se le asignan las clases de estilo CSS. Dentro del div hay definido un Hook, que indica a Prestashop que debe visualizar ahí los componentes que hemos definido para la columna derecha. Como he comentado las plantillas de Prsetashop se usa Smarty, y la sintaxis del Hook indica que se visualice el valor de la variable HOOK_RIGHT_COLUMN.

Con lo que hemos visto hasta ahora podemos darle un buen cambio de imagen a nuestra página web. En el próximo post veremos una introducción de la sintaxis de Smarty, para que así podamos modificar de forma mas profunda las plantillas, y que también nos servirá a la hora de crear un nuevo modulo para Prestashop.