+34 687 770 998 hector.ayestaran@gmail.com





Blog


17
SEP
2013

Personalizando Prestashop, cómo crear un theme

En este artículo vamos a ver cómo realizar algo cada vez más demandado gracias a la crisis, crearemos nuestro propio theme, o diseño si se prefiere llamar, para Prestashop, la solución de e-commerce desarrollada en PHP y MySQL más popular en estos momentos. Trabajaremos con la última versión, la 1.5.x.x.

Prestashop es una aplicación modelo en cuanto a buenas prácticas de análisis y programación se refiere, y entre otras cosas trabaja con Smarty, una librería que nos permite separar lógica de negocio de lógica de presentación mediante un sistema de plantillas (TPL) de lo más potente. Todo esto nos permitirá crear una presentación totalmente nueva sin necesidad de editar el core de la aplicación. Empezemos.

Hooks, módulos y plantillas (template), ¿qué son?

Cada bloque o funcionalidad encapsulada visible en el front es un módulo. También hay módulos que añaden extras al backoffice. Los módulos pueden ser instalados, configurados (gestionados), habilitados, deshabilitados y desinstalados por el usuario del backoffice. Todo esto lo podemos hacer desde la sección Modulos del backoffice. A veces, habremos descargado un módulo y veremos que no podemos instalarlo con la herramienta del backoffice Modulos > Modulos > Añadir un nuevo módulo. En estos casos la instalación es tan sencilla como descomprimir el módulo y moverlo al directorio /modules, agrupado en otro directorio claro. Dicho directorio no debería llevar números ni caracteres extraños.

Hay módulos gratuitos, y hay de pago. Hay módulos que vienen instalados por defecto, y otros tendrás que buscarlos. Cada uno de ellos "habitará" en una región o área de la pantalla llamada hook, de manera predeterminada, la cual podremos cambiar, si el sistema nos los permite, desde Modulos > Posiciones de los módulos > Insertar un hook. Un módulo estará compuesto normalmente de una o varias plantillas, mas archivos de todo tipo tales como JS, PHP, CSS e imágenes, los cuales pueden ser editados a nuestro antojo.

Estos son los hooks y módulos con los que trabajaremos con más frecuencia:

Hooks

Prestashop: Listado de Hooks - 1 Prestashop: Listado de Hooks - 2 Prestashop: Listado de Hooks - 1 Prestashop: Listado de Hooks - 2

Módulos

Prestashop: Listado de módulos - 1 Prestashop: Listado de módulos - 2 Prestashop: Listado de módulos - 1 Prestashop: Listado de módulos - 2

Es importante recalcar que una plantilla puede albergar uno o varios hooks, que a su vez albergarán módulos, pero un módulo también puede albergar plantillas. No debemos liarnos con esto, la jerarquía no es Hook > Módulo > Plantilla. Las plantillas son archivos, hooks y módulos en cambio objetos. Dicho de otro modo, encontraremos plantillas, imágenes y estilos dentro de los módulos, pero también fuera, en la raíz de nuestro theme y en los directorios css e img del mismo.


El siguiente listado muestra las plantillas de las que consta la versión 1.4.x.x, el cual ha sido tomado del sitio oficial de PS. A pesar de la diferencia de versión, la inmensa mayoría se mantienen. Son plantillas que encontraremos en el primer nivel de nuestro theme, no pertenecen a ningún módulo.

Plantilla

Descripción

404.tpl

Utilizado cuando la página solicitada no es encontrada (error HTTP 404).

address.tpl

Utilizado al agregar o editar una dirección del cliente.

addresses.tpl

Utilizado al enumerar las direcciones de un cliente.

authentication.tpl

Utilizado al identificar a un usuario o crear una nueva cuenta de usuario.

best-sales.tpl

Utilizado para enumerar las mejores ventas.

breadcrumb.tpl

Utilizado para encontrar la ruta de navegación.

category.tpl

Utilizado para enumerar todos los productos de una categoría específica.

category-tree-branch.tpl

Utilizado sólo por el bloque de Categoría.

category-cms-tree-branch.tpl

...

cms.tpl

Utilizado para páginas informativas (sub-pestaña CMS>"Herramientas").

contact-form.tpl

Utilizado por el formulario de contacto.

discount.tpl

Utilizado al enumerar todos los boletos de descuento para un solo cliente.

errors.tpl

Utilizado al mostrar errores. Potencialmente llamado por todas las páginas.

footer.tpl

Pie de página.

guest-tracking.tpl

Utilizado cuando un visitante no tiene una cuenta conocida en el sitio, pero desea que su cuenta sea rastreada – por lo tanto necesita crear una cuenta para ingresar.

header.tpl

Encabezado de la página

history.tpl

Utilizado cuando se enumera el historial de pedidos de un cliente.

identity.tpl

Utilizado cuando un cliente edita su información personal.

index.php

Archivo en blanco, los visitantes pre visualizar el contenido de la carpeta.

index.tpl

Página de bienvenida.

maintenance.tpl

Utilizado cuando el sitio se encuentra en modo de mantenimiento.

manufacturer.tpl

Utilizado al enumerar todos los productos de un solo fabricante.

manufacturer-list.tpl

Utilizado al enumerar todos los fabricantes.

my-account.tpl

Página de bienvenida para la cuenta de un cliente.

new-products.tpl

Utilizado al enumerar productos que fueron agregados de último al carrito.

order-address.tpl

Utilizado durante el proceso de compra: Paso 1, elección de direcciones (entrega, facturación).

order-carrier.tpl

Utilizado durante el proceso de compra: Paso 2, elección método de transporte.

order-confirmation.tpl

Utilizado durante el proceso de compra: Último paso, confirmación del pedido (previo pago).

order-detail.tpl

Utilizado para mostrar el contenido del pedido de un cliente.

order-follow.tpl

Utilizado cuando un cliente necesita solicitar una devolución del producto.

order-opc.tpl

...

order-opc-new-account.tpl

...

order-payment.tpl

Utilizado durante el proceso de compra: Paso 3, elección del modo de pago.

order-return.tpl

Utilizado para mostrar los detalles de la devolución de un producto de un cliente.

order-slip.tpl

Utilizado para mostrar vales de crédito del cliente.

order-steps.tpl

Barra de progreso del proceso de compra.

pagination.tpl

Utilizado por todas las páginas que enumeran productos. Muestra el botón de paginación, permiten saltar a la página siguiente/anterior de productos.

password.tpl

Utilizado cuando un cliente necesita cambiar su contraseña.

prices-drop.tpl

Utilizado para enumerar todas las promociones actuales.

product.tpl

Utilizado para mostrar los detalles de tan sólo un producto.

product-list.tpl

Utilizado por todas las páginas que enumeran productos. Muestra la lista actual de los productos.

product-sort.tpl

Utilizado por todas las páginas que enumeran productos. Muestra un menú que permite organizar y filtrar productos.

products-comparison.tpl

...

scenes.tpl

Utilizado para mostrar detalles de una escena dentro de una categoría de producto.

search.tpl

Utilizado para enumerar resultados de una consulta de búsqueda.

shopping-cart.tpl

Utilizado para enumerar productos del carrito de un cliente.

shopping-cart-product-line.tpl

Utilizado para mostrar una sóla hilera del carrito.

sitemap.tpl

Utilizado para mostrar el mapa de sitio.

store_infos.tpl

...

stores.tpl

...

supplier.tpl

Utilizado para enumerar todos los productos de un sólo proveedor.

supplier-list.tpl

Utilizado para enumerar todos los proveedores.

thickbox.tpl

Utilizado para acercar la imagen de un producto.



Creando la estructura de nuestro theme

Lo primero que haremos será duplicar el default theme de PS, el cual se ubica en /themes. Duplicaremos el directorio default y lo llamaremos como queramos (sin caracteres extraños). Dentro de la recién creada carpeta, veremos el archivo preview.jpg, que no es más que la imagen que se muestra en el backoffice en la sección Preferencias > Temas, la cual nos permite cambiar de theme cuando queramos.

Después nos cercioraremos de que los módulos que deseemos personalizar se encuentren en el directorio modules de nuestro theme. Los que no estén, los copiaremos y pegaremos desde el directorio modules en la raíz del sitio, al directorio modules en nuestro theme. Todo lo que vayamos a personalizar debe estar dentro del theme. Las buenas prácticas exhortan a implementar los estilos en documentos CSS, etc. Si vemos que nuestros estilos no se reflejan en pantalla, no lo dudéis, cortarlos y pegarlos en el propio archivo TPL dentro de una etiqueta style. Entonces se reflejarán, son cosas que pasan con PS.

Antes de pasar a la acción, para que nuestros cambios en los TPLs se reflejen, debemos ir a Parámetros Avanzados > Rendimiento y dejar las siguientes opciones así:

Prestashop: Configuración de rendimiento

Obviamente, una vez esté el comercio en producción, habrá que marcar las opciones dos y uno de cada campo.

Pasando a la acción, modus operandi

Para poder trabajar, vamos a necesitar una herramienta imprescindible en todo desarrollo de lado cliente: un depurador o debugger. Los más utilizados son: Seleccionaremos nuestro theme como el actual para nuestro comercio y comenzaremos.
Como ejemplo utilizaremos el módulo Productos Destacados en la Página de inicio, cuyo directorio será /themes/mitema/homefeatured. Lo primero que haremos será abrir el depurador e inspeccionar el html del módulo (no el código fuente, sino lo que ha llegado al navegador). Debemos identificar los elementos o selecciones CSS clave que nos permitirán darle al módulo la forma y aspecto que deseemos. Debemos hacer está tarea de manera rápida y sistemática si deseamos rentabilizar el trabajo. Algunas de las selecciones las deshecharemos al final, al ver que no se han necesitado.

Identificaremos los elementos y los implementaremos en el CSS del módulo, pero vacíos. Las reglas vendrán después.

Lo siguiente será refrescar la página para que las selecciones estén ya disponibles cada vez que pulsemos encima de los elementos con el inspector. Es hora ya de implementar reglas. Lo haremos en el propio depurador e iremos viendo los cambios en pantalla en tiempo real. Por cada selección que terminemos, copiaremos el código CSS del depurador y lo pegaremos en el CSS del módulo. No debemos liarnos con demasiadas selecciones, ya que corremos el riesgo de olvidar algo de lo que hemos modificado y perder trabajo al refrescar.

Los cambios en la estructura principal de la aplicación los podemos implementar en el documento /themes/mitema/css/global.css.

Una cosa que me gustaría matizar es que de cara a dotar a la pantalla que sea una estructura dada, podemos abrir una etiqueta en un módulo, por ejemplo un div, y cerrarla en otro módulo. Pero debemos hacerlo con extrema precaución, cubriendo muy bien la casuística correspondiente. También podemos cortar y pegar fragmentos de código de un TPL a otro, para cambiar cosas de sitio, siempre que lo que estemos haciendo sea coherente. Funcionará.

Recomiendo implementar los nuevos estilos siempre al final del documento CSS, dejando bien claro mediante un comentario que se trata de los estilos del theme. Es lo más limpio, y el que venga por detrás tuyo lo agradecerá.

Imágenes y sus distintos tamaños

Otro reto con el que nos enfrentamos al personalizar un theme, es que en el diseño que nos pasan las imágenes tienen unas dimensiones diferentes a las de por defecto.

Para crear el tamaño deseado iremos a Preferencias > Imágenes > Añadir nuevo. En el campo Nombre tipo pondremos el nombre del estilo que meteremos en el atributo class de la imagen a modificar, en su TPL correspondiente. Si no ponemos ese estilo, la imagen saldrá con el tamaño por defecto. Metemos las dimensiones y continuamos. Si se trata de imágenes de productos, marcaremos Productos, si queremos esas dimensiones para categorías también, marcaremos Categorías , etc.

Prestashop: Configuración de imágenes

Si a estas altura tenemos ya metida una buena parte del contenido, habrá que generar las imágenes en sus tamaños adecuados. Para ellos iremos a Preferencias > Imágenes > Regenerar miniaturas. El proceso podría tardar lo suyo dependiendo de cuanto contenido hayamos metido.

Idiomas y traducción de textos

Probablemente tendremos que publicar el comercio en varios idiomas, los cuales tendremos que instalar si no vienen por defecto. La manera más sencilla es desde Localización > Localización > Importar un paquete de localización. Seleccionaremos el país que nos interese, después dejaremos sólo Idiomas marcado, y pulsaremos en Importar. En Localización > Idioma podemos gestionar todos los idiomas instalados, incluso añadir uno nuevo, manera más engorrosa que la primera opción tal y como veremos.

Prestashop: Configuración de idiomas

Los textos que queramos traducir los pondremos mediante sintaxis de smarty de la siguiente manera: {l s='texto a traducir'}. Después iremos a Localización > Traducción de mensajes > Modificar traducciones. Veremos que habrá que seleccionar la procedencia de los textos, normalmente Front Office o módulos instalados, también el theme correspondiente, y finalmente el idioma, en el cual pulsaremos. Una vez en la pantalla de traducciones, si pulsamos en la leyenda de cada bloque, el contenido se desplegará y podremos añadir o modificar las existentes.

Contenidos dinámicos, CMS

Prestashop aparte de un comercio, también nos ofrece un CMS, con su estructura de categorías y subcategorías. Podemos gestionar estas categorías y páginas CMS desde Preferencias > CMS. Por defecto todas las páginas y categorías que creemos penderán de Inicio. Una vez creadas dichas categorías, podremos crear subcategorías dentro. Veremos también, que por defecto ya hay algunas páginas CMS creadas que pertenecen a Inicio. Son las que aparecen en el footer y en la parte lateral izquierda de la portada.

Prestashop: Configuración de CMS

La rotulación es un poco confusa, pero debe quedar claro que categorías CMS y Páginas en esta categoria penden del mismo padre, el cual podemos ver en la parte superior del backoffice, en el camino de migas.

Si nos damos un paseo por la aplicación, veremos que hay módulos, un bloque lateral, un listado en el footer, etc, que muestran contenidos CMS. Desde Modulos podemos gestionar dichos módulos y especificar que categorías del CMS queremos que muestren. Podemos incluso poner un acceso directo a una página CMS desde la configuración del módulo Menú horizontal superior:

Prestashop: Configuración de menú principal



Fin del artículo. Espero que sea de provecho y os ayude a rentabilizar vuestro primer proyecto Prestashop.

Volver