Imagen del tutorial crear modulo en prestashop

Construcción de módulos en Prestashop

18 enero, 2015 2 comentarios

A la hora de crear un proyecto en Prestashop es habitual que el cliente solicite requisitos específicos que van más allá de la funcionalidad que se obtiene tras la instalación y configuración de un CMS Prestashop 1.6 estándar.

Por suerte, la comunidad online de Prestashop es bastante activa y es común encontrar módulos a precios económicos que dan respuesta a las necesidades de nuestros clientes.

Sin embargo, también puede suceder que, después de invertir una gran cantidad de tiempo, no se encuentra la solución que se amolda a una especificación concreta o que no encuentras gratis el módulo que buscas y el precio que se pide por él es, a tu parecer, excesivo.

Si alguna vez te has planteado crear tu propio módulo en Prestashop o simplemente te gustaría profundizar en el manejo de este CMS para poder modificar un módulo existente, en el siguiente artículo se explican los pasos para crear un módulo que te ayude con la política de cookies de tu tienda virtual.

Verás que es más sencillo de lo que parece.

Supuesto práctico

Google Analytics es la herramienta más extendida para obtener estadísticas sobre tu sitio web. Si deseamos añadir el código de seguimiento de Google Analytics en Prestashop, debido a la actual normativa sobre Política de Cookies, se debe informar al visitante de que se están empleando Cookies en nuestro sitio.

En este tutorial se construirá un módulo para Prestashop 1.6 que permitirá, además de añadir el código de seguimiento, mostrar el respectivo aviso de cookies.

Cuando el usuario navegue por nuestro sitio web, se asumirá que acepta la política de cookies y se ocultará el texto.

Consideraciones previas y definición de Hooks en Prestashop

El módulo se desarrollará bajo la versión de Prestashop 1.6.0.9
Se ha testeado en los navegadores:

  • Mozilla Firefox 33
  • Google chrome 39
  • Internet Explorer 9

¿En qué consiste nuestro módulo de políticas de cookies?

Cuando un usuario acceda a nuestra tienda en Prestashop 1.6 se mostrará el aviso de que el sitio emplea Cookies y de que si continúa navegando, serán aceptadas. Por lo tanto, cuando el usuario pulse sobre un enlace o bien haga scroll con el ratón, el aviso desaparecerá. Para recordar que el usuario aceptó implícitamente la política de cookies, se generará una de modo que en sucesivas visitas a nuestra tienda, no será necesario volver a mostrar dicho aviso.

Además, nuestro módulo incluye el código Javascript necesario para añadir el código de seguimiento de Google Analytics.

Dicho esto, cuando un usuario acceda a nuestra tienda, se mostrará el aviso en la parte inferior o en la parte superior, tal como se observa en las siguientes imágenes.

Aviso de cookie en la parte inferior

Aviso de cookie en la parte inferior

Aviso de cookie en la parte superior

Aviso de cookie en la parte superior

Según se ve en las imágenes y según lo expuesto anteriormente, para crear nuestro aviso de cookies necesitaremos definir y almacenar:

  • Un texto, es decir, el aviso de cookies en sí, que se mostrará en un color definido por nosotros.
  • Una capa con un color de fondo que puede ser opaco o transparente y que puede mostrarse en la parte superior o inferior de la pantalla. La capa puede tener sombra o no.
  • Este mensaje generará una cookie que se empleará para controlar en sucesivas visitas a la web que el usuario ya aceptó nuestra política de cookies. Tendremos que almacenar también el nombre de esa cookie.
  • Por último también se guardará el código de seguimiento de Google Analytics.

El nombre de la cookie, color de fondo, opacidad, color de la letra, color de la sombra y código de Google Analytics se almacenarán en la tabla ps_configuration de nuestra tienda. Puesto que es posible que se tengan activados varios idiomas en nuestra tienda, el mensaje de aviso se guardará en la tabla ps_configuration_lang.

La gestión de dicha información correrá a cargo del fichero principal de nuestro módulo (kadum.php). Se tendrá un fichero encargado de mostrar la información (kadum.tpl) y un par de hojas de estilos (arriba.css y abajo.css) donde se definen las propiedades no configurables de los estilos de nuestro módulo.

En Prestashop, la información a mostrar en el front-end se carga en determinadas posiciones, conocidas como hooks. En este tutorial, se trabajará con dos hooks:

  • head. Ya que cuando la tienda se cargue, en la etiqueta <head> se quiere añadir la hoja de estilos de nuestro módulo. Ello se conseguirá mediante la invocación automática del método hookDisplayHeader.
  • foot. Ya que el mensaje de cookies y la adición del código de seguimiento de Google Analytics se quiere incluir al final de la tienda, aunque el mensaje se desee mostrar en la parte superior. La posición donde se muestre dependerá de la hoja de estilos cargada. Ello se conseguirá mediante la invocación automática del método hookDisplayFooter.

Puedes consultar más información sobre algunos de los hooks de la página de inicio de la plantilla default de Prestashop 1.6 en el siguiente enlace.

A continuación, se tratan los siguientes temas:

Árbol de archivos del módulo

Se asume que se desarrollará un módulo llamado kadum, por lo que dentro de la carpeta modules de Prestashop se creará una carpeta con ese nombre. Dentro de la carpeta modules/kadum/ se podrán añadir diversos ficheros o carpetas. En este tutorial, los ficheros son los siguientes:

  • kadum.php
    El archivo principal. Se debe llamar igual que la carpeta del módulo.
  • logo.png
    Icono que tendrá el módulo en el back-office. Su dimensión es de 32 x 32 px.
  • css/arriba.css
  • css/abajo.css
    Hojas de estilos usadas en el front-end.
  • views/templates/front/kadum.tpl
    El archivo que se cargará en el front-end.

Cuando el módulo se instale, se generará un fichero config.xml cuya misión será optimizar la carga del módulo, por lo que no es obligatoria su creación manual.

Explicación del fichero PHP

El fichero kadum.php es el fichero principal de nuestro módulo. En su interior se define una clase, la cual tendrá una serie de métodos que se ejecutan automáticamente al acceder al back-office o al front-end de Prestashop. Dicha clase extiende de la clase abstracta Module.
Puesto que el fichero se llama kadum, la clase a definir se llamará exactamente igual.
La estructura del fichero con el que se trabaja es:

if (!defined('_PS_VERSION_'))
    exit;

class kadum extends Module{
    private $_html        = '';
    protected $_errors    = array();

    public function    __construct(){}
    public function    install(){}
    public function    uninstall()
    public function    getContent(){
    private function   _postValidation(){}
    private function   _postProcess(){}
    private function   _displayForm(){}
    public function    hookDisplayHeader($params){}
    public function    hookDisplayFooter($params){}
    private function   _hex2rgb($hex) {}
}

Los métodos que se emplean son los siguientes:

  • __construct
    Se establecen los valores de unos atributos e invoca al constructor de la clase Module.
  • install
    Se procede a la instalación del módulo. Se invoca al método install de la clase Module, además de establecer en qué posiciones (hooks) del front-end se cargará partes de nuestro módulo.
  • uninstall
    Se llevará a cabo la desinstalación del módulo. Se invoca al método uninstall de la clase Module. También se eliminan ciertos registros de la tabla ps_configuration y ps_configuration_lang donde se almacena información para las variables empleadas en el módulo.
  • getContent
    Se encarga de la configuración del módulo. Crea y gestiona el funcionamiento del formulario de configuración en el back-office. Según proceda, se invoca a los métodos _postValidation, _postProcess y _displayForm.
    • _postValidation
      Se encarga de comprobar si se han rellenado los campos obligatorios del formulario.
    • _postProcess
      Se encarga de almacenar en las tablas ps_configuration y ps_configuration_lang la información para las variables empleadas en el módulo. Como se ha comentado con anterioridad: texto del aviso, posición, color de fondo, transparencia, color de la letra, color de la sombra y código Google Analytics.
    • _displayForm
      Se encarga de generar el formulario de configuración mostrando los campos necesarios. Emplea la clase HelperForm.
  • hookDisplayHeader
    Se encarga de cargar la hoja de estilo arriba.css o abajo.css en el front-end.
  • hookDisplayFooter
    Se encarga de obtener una serie de datos de las tablas ps_configuration y ps_configuration_lang, almacenarlas en una variable smarty e invocar al fichero kadum.tpl que empleará dicha smarty. También invoca al método _hex2rgb.
  • _hex2rgb
    Se encarga de convertir un color hexadecimal a su correspondiente expresión RGB.

Se observa que cuatro métodos comienzan por guión bajo. Suele ser buena práctica anteponer el guión bajo para nombrar métodos empleados para modularizar nuestro código. De esa forma nos aseguramos que no sobreescribimos ningún método propio de Prestashop.

El resto de métodos son invocados por Prestashop tanto en el back-office como en el front-end:

  • Cuando en el back-office se pulsa la opción para instalar un módulo, se invoca su método install.
  • De forma análoga, cuando se pulsa la opción para desinstalar un módulo, se invoca su método unistall.
  • También en el back- office, cuando se pulsa sobre la opción para configurar un módulo, se invoca su método getContent.
  • Por otro lado, cuando en el front-end se comienza a cargar el hook header se invoca al método hookDisplayHeader de todos los módulos registrados en esa posición.
  • De igual modo, cuando se cargue el hook footer en la parte pública de nuestra tienda, se invoca al método hookDisplayFooter de todos los módulos registrados en esa posición. Si deseas profundizar en la materia, en el siguiente enlace en inglés, se tiene una relación de los hooks de la página de inicio del tema estándar.

En la clase kadum, se emplean dos atributos:

  • _html
    En el método getContent se establece su información. A lo largo de los diversos métodos invocados desde getContent, se le añade el código para la generación y gestión del formulario de configuración.
  • _errors
    En el método getContent se muestran los errores que se establecen en el método _postValidation. Por ejemplo, si no se introduce nombre de la cookie.

Hasta aquí la primera parte de este artículo. Espero que llegados a este punto tengas una visión general sobre:

  • La estructura de módulos en Prestashop.
  • La infraestructura necesaria para crear un módulo nuevo.
  • El fichero principal del módulo y los métodos cargados en él.

 

Una vez que se tiene la idea general, en la siguiente entrada se entrará en detalle, analizando:

  • El comportamiento de cada uno de los métodos que componen el fichero PHP
  • La codificación del fichero TPL y CSS
  • Cómo hacer la instalación y pruebas de tu módulo de Prestashop

No dudes en dejarnos tu comentario o tu pregunta a continuación de este artículo.

Volver al blog

Comentarios (2)

Oswaldo dijo:

Hola como hago para actualizar un modulo que esta para versión 1.5 de prestashop a versión 1.6.1 que se debe tener en cuenta?

Jose dijo:

Hola Oswaldo:
Cuando hablas de actualizar el módulo de Prestashop. Te refieres a que tienes un módulo que corre ahora en la versión 1.5 y quieres modificar su código para que funcione también en la versión 1.6, ¿verdad?
En este artículo, donde se continúa con la explicación de cómo hacer un módulo en Prestashop, verás que en el constructor de la clase se establece el valor de un atributo donde se indica para qué versiones de prestashop es compatible un módulo:
$this->ps_versions_compliancy = array('min' => '1.6', 'max' => '1.7');
No hay ningún cambio sustancial entre la forma de programar un módulo en la versión 1.5 o 1.6 de Prestashop. Por ejemplo, los métodos de instalación/desinstalación, creación del formulario en la parte pública, almacenamiento de los datos en tablas o los métodos del front-end para invocar el ficher tpl que se explican en este tutorial funcionan tanto para la versión 1.5 como 1.6
Por supuesto, siempre realiza una copia de seguridad tanto de los ficheros a modificar como de la base de datos :-)

Deja un comentario