Cómo crear un módulo personalizado en PrestaShop (guía básica)
¿Qué es un módulo en PrestaShop y por qué crear uno?
PrestaShop es una de las plataformas de comercio electrónico más populares del mundo, y su gran ventaja frente a otras soluciones es su arquitectura basada en módulos. Un módulo es, en esencia, un paquete de código que añade funcionalidades específicas a tu tienda: desde un slider de imágenes, hasta una pasarela de pago o un sistema de envíos personalizado.
Aunque en el marketplace oficial existen miles de módulos, tarde o temprano llega el momento en que necesitas algo muy particular que no existe, o que los módulos comerciales no hacen exactamente como tú quieres. Ahí es donde aprender a crear módulos PrestaShop se convierte en una habilidad muy valiosa.
La buena noticia es que no necesitas ser un programador experto para dar tus primeros pasos. Con lo que te voy a contar en esta guía módulo PrestaShop, podrás crear un módulo funcional desde cero, entender su estructura y, sobre todo, sentirte con la confianza para experimentar por tu cuenta.
[INFO] Esta guía está pensada para PrestaShop 1.7 y versiones superiores (incluyendo PrestaShop 8.x). La estructura de módulos es muy similar en estas versiones.
Estructura básica de un módulo: el esqueleto
Antes de escribir una sola línea de código, tienes que entender cómo se organiza un módulo dentro de PrestaShop. Piensa en ello como una casa: necesitas unos cimientos sólidos y una estructura clara.
Un módulo no es más que una carpeta con archivos. La carpeta se coloca en el directorio /modules de tu instalación de PrestaShop. Dentro de esa carpeta, los archivos imprescindibles son:
- El archivo principal del módulo: Un archivo PHP con el mismo nombre que la carpeta. Este archivo contiene la clase principal del módulo.
- El archivo de configuración
config.xml: Un archivo XML que informa a PrestaShop sobre los detalles del módulo. - La carpeta
views: Aquí se guardan las plantillas (templates) que mostrarán el contenido en tu tienda. - La carpeta
controllers(opcional): Para lógica más compleja, como formularios o páginas de configuración. - La carpeta
translations(opcional): Para los archivos de traducción de tu módulo.
Paso 1: Crear la carpeta y el archivo principal
Vamos a crear un módulo sencillo pero útil: un bloque que muestre un mensaje de bienvenida personalizado. Lo llamaremos bienvenida_personalizada.
Primero, crea la carpeta en tu servidor dentro de /modules/bienvenida_personalizada/. Después, dentro de esa carpeta, crea un archivo llamado bienvenida_personalizada.php.
Este archivo será el corazón de nuestro desarrollo módulos PrestaShop. Abre el archivo y escribe lo siguiente:
<?php
if (!defined('_PS_VERSION_')) {
exit;
}
class BienvenidaPersonalizada extends Module
{
public function __construct()
{
$this->name = 'bienvenida_personalizada';
$this->tab = 'front_office_features';
$this->version = '1.0.0';
$this->author = 'Tu Nombre';
$this->need_instance = 0;
$this->ps_versions_compliancy = [
'min' => '1.7',
'max' => _PS_VERSION_
];
$this->bootstrap = true;
parent::__construct();
$this->displayName = $this->l('Mensaje de Bienvenida Personalizado');
$this->description = $this->l('Muestra un mensaje de bienvenida en la página de inicio.');
$this->confirmUninstall = $this->l('¿Seguro que quieres desinstalar este módulo?');
}
public function install()
{
return parent::install() &&
$this->registerHook('displayHome');
}
public function uninstall()
{
return parent::uninstall();
}
public function hookDisplayHome()
{
return $this->display(__FILE__, 'views/templates/hook/bienvenida.tpl');
}
}
Vamos a desglosar qué hace cada parte, porque es fundamental para entender cómo crear módulo PrestaShop correctamente.
- La primera línea
if (!defined('_PS_VERSION_'))es una medida de seguridad. Impide que el archivo se ejecute directamente desde el navegador sin pasar por PrestaShop. - La clase
BienvenidaPersonalizadaextiende deModule, la clase base de todos los módulos. - En el constructor, definimos las propiedades básicas: el nombre (que debe coincidir con el nombre de la carpeta), la categoría (
tab), la versión, el autor y la compatibilidad con versiones de PrestaShop. - El método
install()se ejecuta cuando activas el módulo. Aquí llamamos al métodoregisterHook()para que PrestaShop sepa que nuestro módulo quiere mostrarse en el hookdisplayHome(la página de inicio). - El método
uninstall()se ejecuta al desinstalar. - El método
hookDisplayHome()es el que se ejecuta cuando PrestaShop procesa el hookdisplayHome. Devolvemos el resultado dedisplay(), que renderiza la plantilla.
Paso 2: Crear la plantilla (template)
PrestaShop utiliza Smarty como motor de plantillas. Necesitamos crear el archivo que mencionamos en el hook: views/templates/hook/bienvenida.tpl.
Dentro de la carpeta de tu módulo, crea la estructura de carpetas views/templates/hook/ y dentro crea el archivo bienvenida.tpl.
Escribe esto en el archivo:
<div class="bienvenida-personalizada">
<h2>¡Bienvenido a nuestra tienda!</h2>
<p>Gracias por visitarnos. Esperamos que encuentres lo que buscas.</p>
</div>
Eso es todo. Con este archivo, nuestro módulo ya tiene contenido que mostrar. Pero hay un detalle: Smarty nos permite usar variables. Vamos a mejorar el mensaje para que sea realmente personalizado.
Modifica el archivo principal para que pase una variable a la plantilla. En el método hookDisplayHome(), cambia el return por esto:
public function hookDisplayHome()
{
$this->context->smarty->assign([
'nombre_tienda' => Configuration::get('PS_SHOP_NAME'),
'mensaje_personalizado' => '¡Gracias por elegirnos!'
]);
return $this->display(__FILE__, 'views/templates/hook/bienvenida.tpl');
}
Y en la plantilla, usa las variables:
<div class="bienvenida-personalizada">
<h2>¡Bienvenido a {$nombre_tienda}!</h2>
<p>{$mensaje_personalizado}</p>
</div>
[TIP] Usar variables de Smarty es la forma correcta de hacer que tus módulos sean dinámicos. Puedes pasar cualquier dato desde PHP a la plantilla.
El archivo config.xml: presentación ante PrestaShop
Aunque PrestaShop puede generar este archivo automáticamente, es recomendable crearlo manualmente para tener control total sobre la información que se muestra en el back office.
Crea un archivo llamado config.xml en la raíz de tu módulo:
<?xml version="1.0" encoding="UTF-8" ?>
<module>
<name>bienvenida_personalizada</name>
<displayName><![CDATA[Mensaje de Bienvenida Personalizado]]></displayName>
<version><![CDATA[1.0.0]]></version>
<author><![CDATA[Tu Nombre]]></author>
<tab><![CDATA[front_office_features]]></tab>
<confirmUninstall>¿Seguro que quieres desinstalar este módulo?</confirmUninstall>
<description><![CDATA[Muestra un mensaje de bienvenida en la página de inicio.]]></description>
</module>
Este archivo le dice a PrestaShop qué información mostrar en el listado de módulos del back office. Es una parte esencial de cualquier guía módulo PrestaShop que se precie.
Instalación y prueba del módulo
Ahora viene la parte emocionante. Sigue estos pasos para ver tu módulo en acción:
- Comprime tu módulo: Crea un archivo ZIP con la carpeta
bienvenida_personalizada. Asegúrate de que dentro del ZIP esté la carpeta, no los archivos sueltos. - Accede al back office: Entra a tu panel de administración de PrestaShop.
- Ve a Módulos > Módulos y Servicios: En el buscador, escribe "bienvenida" y debería aparecer tu módulo.
- Haz clic en "Instalar": PrestaShop validará el módulo y ejecutará el método
install(). - Revisa tu tienda: Ve a la página de inicio de tu tienda. Deberías ver el mensaje de bienvenida en la parte inferior de la página (o donde se encuentre el hook
displayHome).
[WARNING] Si tu módulo no aparece, revisa la estructura de carpetas. El nombre de la carpeta y el nombre de la clase deben coincidir exactamente, y el archivo principal debe llamarse igual que la carpeta.
Añadiendo configuración: el formulario de ajustes
Un módulo realmente útil necesita opciones de configuración. Vamos a añadir un formulario en el back office para que el administrador pueda cambiar el mensaje sin tocar el código.
Extendiendo el archivo principal
Modifica tu archivo principal para incluir los métodos getContent() y postProcess():
public function getContent()
{
$output = '';
if (Tools::isSubmit('submitConfiguracion')) {
$mensaje = Tools::getValue('MENSAJE_BIENVENIDA');
Configuration::updateValue('MENSAJE_BIENVENIDA', $mensaje);
$output .= $this->displayConfirmation('Configuración guardada correctamente.');
}
$this->context->smarty->assign([
'mensaje_actual' => Configuration::get('MENSAJE_BIENVENIDA'),
'action_url' => $this->context->link->getAdminLink('AdminModules') . '&configure=' . $this->name
]);
return $output . $this->display(__FILE__, 'views/templates/admin/configuracion.tpl');
}
public function hookDisplayHome()
{
$this->context->smarty->assign([
'nombre_tienda' => Configuration::get('PS_SHOP_NAME'),
'mensaje_personalizado' => Configuration::get('MENSAJE_BIENVENIDA', '¡Bienvenido a nuestra tienda!')
]);
return $this->display(__FILE__, 'views/templates/hook/bienvenida.tpl');
}
Ahora crea la plantilla para el back office. Necesitas crear la carpeta views/templates/admin/ y dentro el archivo configuracion.tpl:
<div class="panel">
<div class="panel-heading">
<i class="icon-cogs"></i> Configuración del módulo
</div>
<div class="panel-body">
<form method="post" action="{$action_url}">
<div class="form-group">
<label for="mensaje">Mensaje de bienvenida</label>
<input type="text" name="MENSAJE_BIENVENIDA" id="mensaje" class="form-control" value="{$mensaje_actual}">
</div>
<button type="submit" name="submitConfiguracion" class="btn btn-primary">
<i class="icon-save"></i> Guardar
</button>
</form>
</div>
</div>
[INFO] El método getContent() se llama cuando haces clic en "Configurar" en el listado de módulos. Aquí es donde puedes mostrar formularios y procesar los datos enviados.
Hooks: el sistema de eventos de PrestaShop
Los hooks son la forma en que PrestaShop permite que los módulos se "enganchen" a diferentes partes de la tienda. Hemos usado displayHome, pero hay muchísimos más.
Algunos hooks importantes que debes conocer:
displayHeader: Se ejecuta en el<head>de todas las páginas. Útil para añadir CSS o JavaScript.displayTop: Se muestra en la parte superior de la tienda.displayFooter: Se muestra en el pie de página.displayLeftColumnydisplayRightColumn: Se muestran en las columnas laterales.displayProductActions: Se muestra en la página de producto, junto al botón de añadir al carrito.displayOrderConfirmation: Se muestra después de que un cliente completa una compra.
Para registrar un hook, solo tienes que añadirlo al método install():
public function install()
{
return parent::install() &&
$this->registerHook('displayHome') &&
$this->registerHook('displayFooter') &&
$this->registerHook('displayHeader');
}
Y luego crear los métodos correspondientes en tu clase:
public function hookDisplayFooter()
{
return $this->display(__FILE__, 'views/templates/hook/footer.tpl');
}
public function hookDisplayHeader()
{
$this->context->controller->addCSS($this->_path . 'views/css/bienvenida.css');
$this->context->controller->addJS($this->_path . 'views/js/bienvenida.js');
}
[TIP] Aprender a usar hooks correctamente es la clave para dominar el desarrollo módulos PrestaShop. Cada hook tiene un propósito y una ubicación específica en la tienda.
Buenas prácticas y consejos de seguridad
Cuando te lances a crear módulo PrestaShop, ten en cuenta estas buenas prácticas:
- Usa prefijos en tus funciones y variables: Para evitar conflictos con otros módulos, usa un prefijo único. Por ejemplo,
bienvenida_antes de cada nombre de función o variable. - Escapa las salidas: En tus plantillas, usa
{escape}o|escape:'htmlall'para evitar ataques XSS. - Valida siempre los datos de entrada: Usa
Tools::getValue()en lugar de acceder directamente a$_POSTo$_GET. - No modifiques los archivos del core: Si necesitas cambiar algo del core, hazlo a través de un override. Nunca edites los archivos originales de PrestaShop.
- Mantén la compatibilidad: Ten en cuenta que los clientes pueden usar versiones antiguas de PrestaShop. Tu módulo debe ser compatible con la versión mínima que indiques.
Solución de problemas comunes
Cuando estés desarrollando, es normal encontrarte con errores. Aquí tienes los más comunes y cómo solucionarlos:
El módulo no aparece en el listado: Revisa que el nombre de la carpeta, el nombre del archivo y el nombre de la clase coincidan. También verifica que el archivo config.xml sea válido.
Error "Class not found": Asegúrate de que la clase extienda correctamente de Module y que el archivo se llame igual que la clase.
El hook no muestra nada: Comprueba que el hook esté registrado en el método install(). Si lo registraste después, desinstala y vuelve a instalar el módulo. También verifica que el archivo .tpl exista en la ruta correcta.
Conflictos con otros módulos: Usa nombres de variables y funciones únicos. Si el problema persiste, desactiva otros módulos para identificar el conflicto.
Optimización y rendimiento
Un buen módulo no solo funciona, sino que funciona rápido. Aquí tienes algunas recomendaciones:
- Minifica el CSS y JavaScript: Si tu módulo incluye archivos de estilos o scripts, minifícalos para reducir el tiempo de carga.
- Usa caché cuando sea necesario: PrestaShop tiene un sistema de caché. Úsalo para consultas frecuentes a la base de datos.
- No hagas consultas SQL en las plantillas: Realiza todas las consultas en el archivo PHP y pasa los resultados a la plantilla mediante variables.
- Limpia los datos al desinstalar: En el método
uninstall(), elimina las configuraciones y tablas que hayas creado.
public function uninstall()
{
Configuration::deleteByName('MENSAJE_BIENVENIDA');
return parent::uninstall();
}
Preguntas frecuentes (FAQ)
¿Puedo crear un módulo sin conocimientos de programación?
Puedes crear módulos muy básicos copiando ejemplos, pero para hacer algo útil necesitas al menos conocimientos básicos de PHP, HTML y Smarty. La buena noticia es que PrestaShop tiene una curva de aprendizaje suave.
**¿Dónde puedo probar mi
