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.

Responsable de los datos: Luis María Jordán Muñoz | Finalidad: Responder a la solicitud que me envíes y ofrecerte información adicional en futuros artículos | Legitimación: Tu consentimiento de forma expresa | Destinatario: Webempresa mi proveedor de hosting | Derechos: Tienes derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido, para más información, te dejo enlace a mi política de privacidad ... enlace

Versiones utilizadas, tiempo y dificultad de desarrollo:

Dificultad del ejercicio: Avanzado.
Tiempo de realización: 30 minutos.
Plataforma: Prestashop 1.7.1.2

Publicaciones relacionadas

8 comentarios en “Cómo crear un módulo en prestashop 1.7”

  1. hola, he seguido todos los pasos, pero me da un error al instalarlo. «No se pudo install….Desafortunadamente el modulo no devolvó detalles adicionales»

    He mirado paso por paso y no encuentro el error… Tengo linux, y prestashop 1.7 en localhost…. ¿Alguna idea de cómo puedo resolverlo ? Porque me quedo atascado aqui…Gracias!

  2. Hola Luis, gracias por el aporte, me ha pasado lo mismo al instarlo me dice “No se pudo install….Desafortunadamente el modulo no devolvó detalles adicionales” la versión es la 1.7.2.3

  3. Hola, acabo de crear otro módulo siguiendo los pasos del manual y veo que en la versión de Prestashop 1.7.1.1 y en la 1.7.2.1 y en ambas funciona perfectamente.

    Os dejo un enlace al módulo, descargarlo e instalarlo y me comentáis si os funciona.
    Si os funciona, comparar el código y veis que diferencia existe.
    Si no os funciona, entraremos en detalles.

    Click aquí para descargar módulo.

  4. Hola Luis, excelente el paso a paso, gracias por compartir esta fino, puede lograrlo sin problemas, tengo la version 1.7.4.1 de prestashop.
    Instale el modulo sin ningun problema, ahora bien, ¿en que lugar de mi tienda, deberia ver parpadeando el mensaje: Hola Este es mi primer módulo?, porque no lo veo por ninguna parte 🙁

    1. Hola Miguel, aquí ya depende mucho del tema que tengas instalado, daré por hecho que se trata del tema por default classic. Siendo así, ve a Modulos -> Posición de los módulos y mira a ver en que hook lo estás anclando.
      Si te apetece, puedes suscribirte al blog para estar al tanto de nuevas entradas.
      😉

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Responsable de los datos: Luis María Jordán Muñoz | Finalidad: Responder a la solicitud que me envíes y ofrecerte información | Legitimación: Tu consentimiento de forma expresa | Destinatario: Webempresa mi proveedor de hosting | Derechos: Tienes derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido, para más información, te dejo enlace a mi política de privacidad ... enlace