Cómo crear un módulo en prestashop 1.7

En esa entrada aprenderemos a crear nuevos módulos en prestashop 1.7.x.x  y de este modo evitaremos tener que gastarnos unos cuantos euros con un mínimo conocimiento en programación.

¿Qué tipo de módulo vamos a desarrollar?

La idea de crear un módulo en prestashop 1.7 en esta entrada es desarrollar algo bastante sencillo, sin conexión a base de datos ni tampoco al panel de administración. Haremos un módulo en el cual se mostrará un texto y desde aquí cada uno que reemplace el texto por lo que le resulte más interesante.

Primeros pasos

• Disponer de un entorno de desarrollo, bien en nuestra máquina local o en un servicio de hosting ofrecido por algún proveedor.
• Instalar la versión de prestashop 1.7.x.x.
• Configurar en un IDE de desarrollo el proyecto de nuestra tienda.

Estructura para crear un módulo en prestashop 1.7

Lo primero que vamos a hacer es abrir nuestro editor y crear una estructura de directorios tal y como presento en la siguiente imagen. Tengamos en cuenta que en esta entrada muchas carpetas quedarán vacías, pero en un módulo completo todas ellas dispondrán de archivos.

Explicación de los directorios que vamos a utilizar en nuestro módulo.

• mi_primer_modulo/ carpeta que contiene todos los archivos necesarios.
• translations/ carpeta donde se guardan las traducciones del módulo
• views/ carpeta que contiene las sub carpetas de plantillas .tpl, scripts .js, hojas de estilo .css, imágenes, etc.
• admin/ sub carpeta para mostrar elementos de administración.
• css/ sub carpeta que contiene las hojas de estilo [.css]
• img/ sub carpeta que contiene las imágenes
• js/ sub carpeta que contiene los archivos javascript [.js]
• templates/ sub carpeta que contiene los archivos de plantillas [.tpl]
• hook/ sub carpeta que contiene los archivos de plantilla de los hooks del módulo.

Configurando el módulo en prestashop 1.7

Es el momento de ponerse manos a la obra con el código fuente, vamos a abrir config.xml. Este archivo es necesario para cargar el módulo desde el backoffice y debe ir en la raíz de la carpeta de nuestro módulo de este modo (mi_primer_modulo/config.xml).

<?xml version="1.0" encoding="UTF-8" ?>
<module>
 <name>mi_primer_modulo</name>
 <displayName>
 <![CDATA[Mi primer módulo]]>
 </displayName>
 <version>
 <![CDATA[1.0.0]]>
 </version>
 <description>
 <![CDATA[Este es el primer módulo que creo en prestashop 1.7.x.x]]>
 </description>
 <author>
 <![CDATA[luisjordan.net]]>
 </author>
 <tab>
 <![CDATA[front_office_features]]>
 </tab>
 <confirmUninstall>
 <![CDATA[¿Desea desinstalar?]]>
 </confirmUninstall>
 <is_configurable>0</is_configurable>
 <need_instance>0</need_instance>
 <limited_countries></limited_countries>
</module>

La verdad es que en este .xml es todo muy intuitivo, poco tenemos que explicar.
Pasamos ahora a la parte más delicada de los módulos, la clase.

Creando el script .php que contiene la clase de módulo en prestashop 1.7

En el directorio raíz de nuestro módulo vamos a crear un script llamado exactamente igual que el módulo: mi_primer_modulo.php y será aquí donde declaremos nuestra lógica.

Todo script de clase debe comenzar del mismo modo y es comprobando la versión de prestashop, abrimos entonces mi_primer_modulo.php e insertamos lo siguiente.

<?php
if(!defined('_PS_VERSION_'))
exit;

...

?>

A continuación vamos a quitar los tres puntos ya que ese es el lugar donde vamos a declarar nuestra clase, esta que debe tener exactamente el mismo nombre que el script y extenderá del módulo principal.

class mi_primer_modulo extends Module{
   ...
}

Desde este momento todos los métodos que vamos a definir pertenecerán a esta clase, vamos a reemplazar los 3 puntos suspensivos de dentro de la clase por las siguientes funciones.

Definiendo el método constructor __construct()

public function __construct()
{
    $this->name = 'mi_primer_modulo'; //nombre del módulo el mismo que la carpeta y la clase.
    $this->tab = 'front_office_features'; // pestaña en la que se encuentra en el backoffice.
    $this->version = '1.0.0'; //versión del módulo
    $this->author ='Luis Jordán: https://luisjordan.net'; // autor del módulo
    $this->need_instance = 0; //si no necesita cargar la clase en la página módulos,1 si fuese necesario.
    $this->ps_versions_compliancy = array('min' => '1.7.x.x', 'max' => _PS_VERSION_); //las versiones con las que el módulo es compatible.
    $this->bootstrap = true; //si usa bootstrap plantilla responsive.

    parent::__construct(); //llamada al constructor padre.

    $this->displayName = $this->l('Mi primer módulo'); // Nombre del módulo
    $this->description = $this->l('Módulo de prueba.'); //Descripción del módulo
    $this->confirmUninstall = $this->l('¿Estás seguro de que quieres desinstalar el módulo?'); //mensaje de alerta al desinstalar el módulo.

    $this->templateFile = 'module:mi_primer_modulo/views/templates/hook/mi_primer_modulo.tpl';
}

He puesto casi todo los comentarios en el código, pero comento alguno que ha quedado pendiente…
Y con $this->templateFile = ‘module:mi_primer_modulo/views/templates/hook/mi_primer_modulo.tpl’; le decimos cual es la template donde se va a pintar toda la lógica.

Indicándole al módulo dónde va a poder ser mostrado.

Con el siguiente método vamos a decirle al módulo en que posiciones de la plantilla puede ser mostrado.

public function install()
{
    return (parent::install()
    && $this->registerHook('displayHeader') // Registramos el hook dentro de las cabeceras.
    && $this->registerHook('displayCarrierExtraContent')
    );

    $this->emptyTemplatesCache();

    return (bool) $return;
}

Con la línea $this->registerHook(‘displayHeader’) lo que hacemos es meter los scripts .css y .js dentro de las cabeceras para que se ejecuten correctamente.

Y con $this->registerHook(‘displayHome’) le indicamos que esto debe ser mostrado en la posición displayCarrierExtraContent de la template.

Creando la función displayHeader()

public function hookDisplayHeader($params)
{
    $this->context->controller->registerStylesheet('modules-miPrimerModulo', 'modules/'.$this->name.'/views/css/miPrimerModulo.css', ['media' => 'all', 'priority' => 150]);
    $this->context->controller->registerJavascript('modules-miPrimerModulo', 'modules/'.$this->name.'/views/js/miPrimerModulo.js',[ 'position' => 'bottom','priority' => 150]);
}

Con estas líneas estamos declarando un .js y un .css,  y le estamos indicando la ubicación donde queremos que se cargue cada uno de ellos con position y dónde queremos que sean cargados (bottom o header).

Por último el valor priority define en que posición dentro de todos los scripts de su mismo tipo va a aparecer. Cuanto más alto sea el número, más abajo aparecerá el script en el listado de scripts.

Método que nos permite desinstalar un módulo en prestashop 1.7

Al igual que hemos definido el método install para realizar la instalación del nuevo módulo, desde el propio panel de administración de nuestra tienda debemos ofrecer la opción de desinstalarlo y para ello en nuestro código fuente vamos a definir la función uninstall.

public function uninstall()
{
  $this->_clearCache('*');

  if(!parent::uninstall() || !$this->unregisterHook('displayHome'))
     return false;

  return true;
}

Construyendo la vista o archivo .tpl

Para mostrar la vista vamos a crear la siguiente función hookDisplayHome().

Todos los métodos para los hooks, deben llevar delante la palabra hook seguida del nombre del hook. En este caso hookDisplayHome().

public function hookDisplayHome(){
    return $this->display(__FILE__, 'views/templates/hook/mi_primer_modulo.tpl');
}

Añadiendo un texto en la vista

Ahora vamos a nuestro archivo .tpl y añadimos un texto para visualizar el resultado.
<div class=»parpadea»>{l s=’Hola Este es mi primer módulo’}</div>

Llegados a este punto nos quedaría comprimir en un fichero con extensión .zip nuestro módulo y subirlo desde el panel de administración de nuestra tienda, pero vamos a darle un poco más de encanto. Vamos a hacer uso del script .css que añadimos anteriormente en nuestra clase mi_primer_modulo.

Dando un toque de encanto al texto cargado en el módulo

Vamos a crear una nueva hoja de estilos en mi_primer_modulo/views/css/ y la vamos a llamar miPrimerModulo.css que es lo que añadimos anteriormente con $this->context->controller->registerStylesheet(‘modules-miPrimerModulo’, ‘modules/’.$this->name.’/views/css/miPrimerModulo.css’, [‘media’ => ‘all’, ‘priority’ => 150]);

.parpadea {
  animation-name: parpadeo;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
   100% { opacity: 1.0; }
}

@keyframes parpadeo {
  0% { opacity: 1.0; }
   50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

Y ahora si, para finalizar esta entrada de cómo crear un módulo en prestashop 1.7, comprimimos el módulo en un zip y lo instalamos en nuestra tienda.
Espero que os sea de utilidad esta entrada al igual que espero vuestros comentarios.

Ah y recuerda!!!, si quieres estar al día acerca de la creación de nuevas entradas, no te olvides de suscribirte al blog.