Características del Front-Office

Directorios de las plantillas

El nombre de la carpeta de la plantilla, como es normal debe contener un nombre único, las plantillas se encuentran físicamente en el directorio:

/themes/

Dentro del directorio de la plantilla, nos encontramos con los siguientes directorios:

/cache/

Contiene ficheros temporales que se generan si tienes activadas las opciones de “optimización” en la pestaña Parámetros -> Rendimiento, estos archivos se generan con la intención de mejorar la carga de la tienda.

/css/

Contiene las hojas de estilos, pertenecientes a la plantilla.

/img/

Contiene las imágenes correspondientes a la plantilla.

/js/

Contiene los ficheros “JavaScript” correspondientes a la plantilla.

/lang/

Contiene los ficheros de idioma que tengas activado en la tienda.

/mobile/

Contiene los ficheros, correspondientes a la plantilla “móvil” de Prestashop.

/mails/

En este directorio, tú puedes sobreescribir los “emails” en su propia plantilla, para personalizar su estilo, y que no afecte a toda la tienda, solo a la plantilla que uses en ese momento.

/modules/

En este directorio, podemos sobreescribir los módulos, con el fin de modificarlos exclusivamente para la plantilla que estemos usando en ese momento y que no afecten a todo, además de que esto nos causara que si de pronto actualizamos un módulo, no perdamos los cambios realizados en los ficheros de los módulos.

/pdf/

Puede sobreescribir las propias plantillas de las facturas, albaranes, etc… en la propia plantilla.

Los últimos tres directorios, que hemos mencionado: /mails/, /modules/ y /pdf/ son directorios o mejor dicho “subdirectorios”, que nos permitirán personalizar Prestashop a un nivel “superior” y alcanzar un nivel de personalización óptimo.

Imagen de Previsualización

Cuando, en la pestaña Preferencias -> Temas, vemos los temas que tenemos subidos e instalados, vemos una “miniatura” de la plantilla.

Esta imagen, se encuentra dentro del directorio de la plantilla:

/themes/tu-plantilla/

Y se llama: preview.jpg

La imagen, únicamente debe tener extensión “*.jpg”.

El tamaño en pixeles de la imagen, tiene que ser de: 108*202 pixeles.

Ficheros de traducción

Las traducciones de las plantilla, se encuentran en el directorio:

/lang/

Yo personalmente cuando quiero abrir dichos ficheros para realizar una pequeña modificación, uso “Notepad++”

Manejo traducciones

Si nos fijamos en Prestashop, la palabra “Clave” en “Smarty”, con la que luego se hacen las traducciones (en este caso) de la plantilla, tienen este estilo:

{l s='Hola Mundo'}

Esta palabra “clave”, la podemos traducir a los distintos idiomas, en la pestaña “Localización -> Traducciones -> Traducciones del Front-Office”

Directorio de cache

Cuando en Prestashop, en la pestaña Parámetros Avanzados -> Rendimiento, activamos las opciones de “CCC”.

Dentro del directorio:

/themes/tu-plantilla/cache/

Se generan ficheros “cache”, que nos permitirán que la carga de la tienda “mejore”.

Directorio de imágenes

En el directorio “img” de la plantilla, como es lógico almacenamos las imágenes de la plantilla.

Indico que dentro del directorio “img” de la plantilla, también se almacenan dos subdirectorios, uno se llama “icon” y otro “jquery”.

Directorio de hojas de estilos (CSS)

En Prestashop cada “controlador” llama su fichero *.CSS” correspondiente, por ejemplo el “Contact Controller” (ContactController.php) hace una llamada al fichero: contact-form.css

Por otro lado, a modo informativo indico que el fichero “global.css“, incluye los estilos comunes para la plantilla que estemos usando en ese momento, el resto de ficheros *.css son específicos para distintas partes de la plantilla.

Directorio de ficheros JavaScript (JS)

Dentro del directorio “js” de la plantilla, tenemos los ficheros “JavaScript” ligados a la plantilla.

Como hemos comentado antes, los ficheros *.CSS por defecto de la plantilla van ligados a los controladores que tenemos en Prestashop, con los “*.JS” pasa algo parecido, pero en este caso digamos que no todo los controladores tienen sus ficheros ligados en este directorio.

Versión móvil de la plantilla

En la plantilla por defecto, en el directorio:

/themes/default/mobile/

Tenemos los ficheros, referentes a la plantilla “móvil”, y dentro de dicha subcarpeta, tenemos la estructura “básica” de una plantilla”. (/img/, /js/ y /css/)

Sobreescribir “Emails”

Si tú copias el contenido del directorio “/mails/” en el directorio:

/themes/tu-plantilla/mails/

Podrás personalizar los “emails” desde tu misma plantilla, sin tener que tocar los originales.

Sobreescribir plantillas “PDF” (Facturas…)

Si tú copias el contenido del directorio “/pdf/”  en el directorio:

/themes/tu-plantilla/pdf/

Podrás editar las plantillas de las facturas, albaranes, etc… desde tu misma plantilla, sin tener que tocar las originales.

Sobreescribir módulos

Realmente, si usamos las últimas versiones de Prestashop con la plantilla por defecto, la mayoría de módulos (ficheros tpls de los módulos), vienen sobreescritos en el directorio:

/themes/tu-plantilla/modules/

Si por ejemplo quisiéramos sobreescribir nosotros un módulo, que no estuviera sobreescrito en la plantilla, haríamos lo siguiente.

Copiar el fichero: (Ejemplo donde sobreescribimos el fichero *.tpl del “blocktopmenu”, es decir del menú horizontal)

/modules/blocktopmenu/blocktopmenu.tpl

Y pegarlo en el directorio:

/themes/tu-plantilla/modules/blocktopmenu/blocktopmenu.tpl

(Si la estructura: /modules/blocktopmenu/ no la tenemos creada dentro del directorio de la plantilla que estemos usando, la podemos crear nosotros sin ningún problema)

Como ves lo que hacemos es coger la “ruta” donde se encuentra el “tpl” original del menú y pegar esa ruta en el directorio de la plantilla que usamos. (Bueno, más bien crear la ruta en el directorio de la plantilla, y pegar el fichero *.tpl que queramos cambiar en dicha ruta)

De igual manera, que hemos sobreescrito el fichero “*.tpl” de un módulo especifico, podemos hacer lo mismo para los fichero *.css y *.js de los módulos, simplemente obteniendo la ruta a sobreescribir, y crearla dentro del directorio de la plantilla, copiando el fichero *.css o *.js del módulo a sobreescribir.

(Lógicamente el css, dentro del directorio “css” del tema, con la ruta a crear y el js dentro del directorio “js” del tema, con la ruta a crear)

Mostramos un ejemplo donde vamos a sobreescribir el “css” del módulo de paypal:

Copiar fichero:

/modules/paypal/css/paypal.css

Y pegarlo en:

/themes/tu-plantilla/css/modules/paypal/css/paypal.css

Lógicamente es posible que el css, tenga algún “background” referente a alguna imagen del módulo, al no ser las rutas iguales, tenemos que copiar en este caso el contenido del directorio:

/modules/paypal/img/

En:

/themes/tu-plantilla/css/modules/paypal/img/

Por último, haremos un ejemplo de sobreescribir un “JS” de un módulo en la plantilla que estemos usando.

Sobreescribir los “JS” del blocktopmenu (Menú Horizontal) en la plantilla que estemos usando.

Copiar contenido del directorio:

/modules/blocktopmenu/js/

En:

/themes/tu-plantilla/js/modules/blocktopmenu/js/

Lógicamente, los ficheros que deben ser editados, son los que hayamos sobreescritos en la plantilla.

————

Documento de Prestashop 1.5.