9 enero 2019
Comments: Comentarios desactivados

Personalizar PDF facturas albaranes en Prestashop

En este nuevo tutorial de Prestashop 1.6 explicaremos, paso a paso, como customizar a nuestro gusto los PDF’s que se envían a nuestros clientes.

Como podemos ver en la imagen, el PDF de Prestashop generado por defecto es un tanto simple y carece de personalidad. Tiene colores muy planos, así como la tipografía.

pdf_defecto_prestashop

Pues bien, en este tutorial enseñaremos unas cuantas claves para poder modificar este PDF a nuestro gusto y darle un aspecto mas atractivo y acorde con nuestra tienda. Para localizar los archivos que deberemos modificar para customizar nuestros PDF’s nos deberemos dirigir al directorio de nuestro Prestashop y ir a la carpeta PDF. Una vez allí deberemos buscar un archivo en concreto :

  • invoice.style-tab.tpl.

Una vez localizado, lo abrimos y nos encontraremos con una gran variedad de estilos CSS a modificar.

Como podemos ver en la imagen, asignamos valores (Ya sean hexadecimales para los colores, o con para los tamaños de las fuentes) a variables que luego serán usadas varias veces dentro de las etiquetas “style”.

De esta manera, si qusieramos cambiar el tamaño de una de las fuentes o algún color en concreto, solo deberíamos acudir a esa variable, y no tener que buscar uno por uno esos valores dentro de todo el archivo CSS.

El siguiente paso será cambiar estos valores y ponerlos acordes a nuestro gusto o, en su defecto, acordes a los colores/tipografía de nuestra tienda. En mi caso, no haré mucho énfasis en la cohesión de los colores o la tipografía, ya que solo quiero que veáis como es el proceso para que esto suceda.

Ahora nos tocara ir cambiando los valores de las diferentes variables que vimos en la imagen de arriba.

Empezaremos por modificar el color de las cabeceras de nuestro PDF (Numero de factura, Fecha de factura…) que corresponde a esta variable dentro del CSS.

Aplicamos los cambios y este sería el resultado :

prestashop_modificar_estilos_albaran_pdf

Ahora vamos a cambiar los bordes aplicados a las cabeceras que anteriormente modificamos. Este es la variable que corresponde a dichos bordes :

Aplicamos los cambios y este sería el resultado :

prestashop_modificar_estilos_css_pdf_albaran

Como podemos ver, al aplicar el color blanco al borde de las cabeceras, ya no se aprecia ningún tipo de borde, cambiando el aspecto con el de la primera modificación que hicimos.

La siguiente modificación será cambiar el color de fondo de las diferentes referencias del albarán Las variables que debemos modificar son las siguientes :

Aplicamos los cambios y el resultado sería el siguiente :

prestashop_pdf_albaran_estilos_referencias

Si observamos el cambio referente al PDF original que tenemos al principio del tutorial, vemos que el cambio es evidente.

prestashop_modificar_albaran_pdf_final

Y para acabar, os enseñaré como aumentar el margen entre el header y el cuerpo del texto. Para ello debemos dirigirnos al directorio de nuestro Prestashop y modificar el archivo que mostrare en la siguiente ruta :

  • Classes/pdf/PDFGenerator.php

Una vez tengamos el archivo nos deberemos dirigir dentro del archivo al método header() y añadir la siguiente linea de texto :

Aplicamos el cambio y el resultado será el siguiente :

prestashop_margen_header_albaran_pdf

Como vemos en la imagen, la distancia entre el logo y el cuerpo del texto ha aumentado considerablemente.

Y esto es todo. Un saludo y hasta el proximo tutorial.