Crear un módulo para Prestashop

Prestashop se basa en el modelo MVC (Modelo, Vista, Controlador) para gestionar la información.

Modelo-> Son todos los objetos que extienden la clase base “ObjectModel”, que define las funciones y comportamiento estándar para gestionar las tablas de prestashop y la base para el soporte multilenguaje.

Vista-> Implementada mediante las plantillas de Smarty, que se encargan de gestionar la presentación de datos en pantalla.

Controlador-> Son las clases que se encargan de la gestion del flujo de datos, recuperan los datos del modelo y los envían a la vista. Se encuentran en el directorio base de la aplicación y se corresponden con las páginas principales del proyecto.

Dado que cualquier cambio en esta arquitectura sería elevadamente difícil de controlar y actualizar con las diferentes nuevas versiones del producto, la solución se encuentra en crear módulos, que utilizan las funciones y recursos del núcleo de la aplicación sin interferir en ella.

El objetivo de este artículo es proporcionar una forma sencilla de crear nuevos módulos para la solución de comercio electrónico Prestashop mediante la creación de un «patrón de diseño» para la estructura de un módulo.

Prestashop tiene la capacidad de incorporar nuevos módulos a los ya existentes.

La organización de Prestashop permite modificar tanto la parte visible (Front end) como la parte de administración (Back office).

Dentro de la estructura de directorio del proyecto Prestashop, la parte que nos interesa es el directorio «modules». En este directorio tenemos todos los módulos que tiene incorporados nuestra tienda.

Estos módulos se dividen en varios tipos de módulos, hay módulos ‘ block ‘ que representan en sí mismos un tipo de objeto utilizable y también hay módulos más «Genéricos».

Todos los módulos están organizados de la misma manera, haciendo así más sencillo crear un nuevo módulo. Se podría hablar de un «patrón» de los módulos Prestashop. Y este es relativamente simple.

Todo módulo incluye como mínimo un archivo <nombreMódulo>.php y otro
<nombreMódulo>.tpl. Con estos dos archivos es suficiente para crear un nuevo módulo.

En el directorio de un módulo, se podría también observar la presencia de un archivo logo.gif que va a ser el icono que se muestre en la tabla de módulos de administración (Back office).

Encontramos también otros archivos (script php) representados con abreviaturas de códigos de países representando los idiomas o traducciones del módulo:

es:Español
en:Inglés
fr.:Francés
d:Alemán
nl:Holandés
..

Estos archivos de idiomas, para ser utilizados en las traducciones, deben encontrarse en el directorio raíz del módulo. Prestashop no los encontrará si se encuentran por ejemplo en los subdirectorios.

A nivel práctico, lo mejor es construir su módulo con un idioma de «referencia» y a través del Back office utilizar la herramienta de «traducción» para editar otros idiomas y guardar sus expresiones traducidas.

En las plantillas, la sintaxis de la llamada es un poco diferente a las expresiones generales:

{l s = 'la expresión' mod = 'Unmodule'}

Si no se pone el atributo mod, la expresión no se traducirá correctamente.

Como vamos a construir el código general de nuestro módulo?

Nuestra clase módulo va a heredar de la clase Module (prestashop/clases/Module.php) y, por tanto, ya tendrá unas pocas propiedades y métodos desde el principio.

Vamos a mostrar un código básico para un nuevo módulo:

<?php
class UnModule extends Module {

    public function __construct() {
        $this->name = 'unmodule';
        $this->tab = 'front_office_features';
        $this->version = 1.0;
        $this->author = 'Jose Aguilar';
        parent::__construct();
        $this->page = basename(__FILE__, '.php');
        $this->displayName = $this->l('Titulo del modulo');
        $this->description = $this->l('Descripcion del modulo');
    }

   public function install() {
      if(parent::install() == false)
         return false;
      return true;
   }
}
?>

Como vemos, para crear módulos va a ser imprescindible que tengamos conocimientos en programación orientada a objetos ya que vamos a tener que trabajar con clases.

Para acceder a la configuración del módulo, se debe añadir el siguiente método a nuestro módulo:

public function getContent () {
   // Instruciones …
}

Este poco código, añade en el Back office un enlace hacia la página de configuración asociada.

Si se sigue el enlace «Configuración >>» que aparece en el módulo, la página destino estará vacía de momento.

Con este poco código ya conseguimos que en la administración tengamos disponible nuestro módulo.

Para que un módulo se «añada» a una parte de «Front office» deberá referirse a un «gancho» (Hook) que debe existir en la tabla Prestashop del mismo nombre.

Las tablas de Hook presentes en Prestashop son:

1. payment
2. newOrder
3. paymentConfirm
4. paymentReturn
5. updateQuantity
6. rightColumn
7. leftColumn
8. home
9. header
10. cart
11. authentication
12. addproduct
13. updateproduct
14. top
15. extra
16. deleteproduct
17. productfooter
18. invoice
19. updateOrderStatus
20. adminOrder
21. footer
22. PDFInvoice
23. adminCustomers
24. orderConfirmation
25. createAccount
26. customerAccount
27. orderSlip
28. productTab
29. productTabContent
30. shoppingCart

Podríamos añadir la siguiente función a nuestro módulo:

function hookDisplayLeftColumn($params) {

   return $this->display(__FILE__, 'unmodule.tpl');
} 

function hookDisplayRightColumn($params) {
   return $this->hookDisplayLeftColumn($params);
}

Uno de los puntos más importante es la “llamada”, de nuestro módulo a ciertas partes del Front office (en el caso de ser necesario obviamente).

Para hacer un módulo visible en la parte front office, debemos instalar el nuevo módulo y posicionarlo dentro del hook que deseemos siempre teniendo en cuenta que en el caso de este ejemplo solo hemos añadido 2 funciones: «hookRightColumn» y «hookLeftColumn», por tanto, este módulo solo podrá posicionarse en una de las 2 columnas de la tienda.

Ahora deberíamos crear un archivo .tpl para mostrar nuestro módulo en el front office. Por norma, el archivo debe contener el mismo nombre que el archivo php pero podríamos llamarle de cualquier forma, mientras hagamos la llamada correcta dentro del archivo .php.

El archivo «unmodule.tpl» contendrá el código HTML que se visualizará en el Front office.

Para añadir estilos o código CSS a un módulo deberemos añadir la siguiente función al módulo:

public function hookDisplayHeader($params) {
   $this->context->controller->addCSS($this->_path.'css/unmodule.css', 'all');
}

Crea un directorio css en el directorio de tu módulo y añadir un archivo .css  con los estilos que utilizará el módulo.

Y ahora solo faltan ideas para crear nuevas funcionalidades.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(17 votos, promedio: 5 de 5)
Comparte en las redes sociales

19 respuestas a “Crear un módulo para Prestashop”

  1. Ricardo dice:

    Buen dia, ante todo muchas gracias por el aporte!! Tengo una consulta, estoy por lanzar una tienda de productos digitales (PRESTASHOP), entonces quisiera integrar un método de pago tipo billetera, donde el usuario pueda recargar su saldo a través de transferencias o depósitos bancarios y pagar el importe total o parcial de sus compras con el saldo disponible. Ando buscando algún tutorial orientado a éste tipo de módulo puesto que, soy nuevo en prestashop pero solo encuentro tutoriales básicos para crear módulos, ya estoy estudiándolo y practicando pero si alguien sabe de alguna guía más específica estaría muy agradecido de poder leerla!! De antemano gracias!!

  2. CriterioNet dice:

    Buenas tardes, muchas gracias por tu aporte.
    Tengo una consulta, yo he creado un nuevo módulo, pero quiero utilizar un hook de acción (he visto que tus ejemplos son de hooks para mostrar literalmente cierta información en la web, por ejemplo en la columna izquierda o derecha).

    En el caso de que quisiera por ejemplo, con un botón enviar la información del carrito actual (es decir, el detalle de los productos añadidos: nombre precio unitario y total, cantidad…), cómo puedo configurar el hook y envío de email? Estoy con este tema hace ya un tiempo…

    Desde ya muchas gracias!!!

    • Jose Aguilar dice:

      Hola buenas tardes,

      Estando en el carrito yo lo que haría es aprovechar los hooks que hay alrededor del carrito. Por ejemplo está el hookShoppingCartFooter donde puedes añadir el botón y también podrías controlar fácilemente la llamada a la acción de este botón.

      Saludos

  3. Oscar Silva dice:

    Disculpa como guía para iniciar esta excelente me sirvió de maravilla pero revise la documentación de Prstashop y no encontré como ingresar un archivo JS es mas ni siquiera como ingresar un archivo CSS es por eso que di con tu WEB. Conocerás algún sitio WEB donde indiquen como hacer un modulo mas avanzado? Gracias por tu atención y tu WEB que me ha ayudado bastante.

    • Jose Aguilar dice:

      Hola buenas tardes,

      Para añadir un js tan solo debes añadir algo como lo siguiente en el hook header:

      $this->context->controller->addJS($this->_path.’js/unmodule.js’, ‘all’);

      Saludos

  4. Artu dice:

    Muy buen post para los que estamos empezando.
    Mi pregunta es si conoces algún módulo de menú similar al que usan en esta web: http://greenice.com.es/

    Como ves tiene Categorías Principales, Categorías Secundarias y Subcategorías, y en cada una incluye una pequeña imagen o icono.
    Me parece un menú muy gráfico y descriptivo a simple vista, pero no lo localizo. En el código fuente pone algo de csmegamenu, pero buscando no logro encontrar el mismo.

    Un saludo y gracias por adelantado.

    • Jose Aguilar dice:

      Hola buenas tardes,

      Es normal que no lo encuentres. Es un menú que se le ha hecho al cliente totalmente personalizado y administrable. Funciona en prestashop 1.5. En la nueva versión de prestashop no se ha validado.

      Saludos

      Saludos

  5. Abraham dice:

    Buenas tardes, quitandole el polvo a este post tengo una duda en la parte del llamado hoja de estilos, actualmente en prestashop 1.6 no se si en las otras versiones veo que hacen el llamado de la hoja de estilo desde el .php con una fuction llamada hookdisplayheader como podría hacer eso cuando un modulo no tiene estilos (que es mi caso) porque me copio de otros módulos y no me funciona. Gracias

    • Jose Aguilar dice:

      Hola,

      Si tu módulo no va a utilizar hojas de estilo no hace falta utilizar el addCSS(). No es obligatorio, es opcional ya que no todos los módulos tienen hojas de estilo.

      Saludos

  6. Mike Amorós dice:

    Hola.
    Ante todo mi agradecimiento por este post que me ha iniciado en el desarrollo de mis propios módulos.
    Tengo una duda para la que estoy buscando solución y no encuentro . He desarrollado mi primer módulo y necesito que algunos de los campos que he introducido puedan añadirse en varios idiomas a la BD. como os he comentado, no encuentro ningún tipo de información al respecto, o soy un zoquete con mis búsquedas. Si alguno conocéis esta información y no os importa compartirla, o sabeis de algún sitio (Español o inglés) donde la proporcionen estaría muy agradecido.

    Enhorabuena por el sitio.

    saludos

  7. diendiweb dice:

    buen dia a todos, conocen algun modulo de menu vertical similar a este (su titulo es Browse our catalog):

    http://www.customtoronto.ca/

    conocen algun modulo gratuito, ojala haya algun gratuito aunque sea con la funcionalidad similar y adaptarle el css, luego puedo poner el cambio/adaptacion en el foro para que lo tengan.

    Muchas gracias

  8. Avaloncio dice:

    Hola, muy buena sitop para entender prestashop, tengo esta duda, estoy construyendo un modulo de pago y necesito hacer la facturación con el mismo sistema, invocando el hook «invoice» se podra hacer esto, no e podido encontrar mucha información de esto.

    gracias de antemano.

  9. Ivan Ferrer dice:

    Excelente. Me ha acabado de aclarar los pasos de la documentación oficial.

  10. emiliano dice:

    alguna idea de como insertar código unity en un módulo?

  11. emiliano dice:

    Hola
    muy buen post, muchas gracias
    necesito crear un modulo que pueda conetener código de unity
    como por ejemplo el de esta página: http://www.fantarama.com/juegos/unity/loop/dia-noche-test1.html

    estuve probando con los diferentes módulo que pueden contener código html pero ninguno ejecuta el unity queda solo la imagen estática
    alguna idea de como puedo hacerlo? o alguna fuente para investigar?
    gracias de nuevo

  12. salvador dice:

    Excelente tema. Una pregunta, de que forma puedo agregar un nuevo catalogo en la parte del admin, hay alguna docuementacion para seguir le pasos. Se que se tienes que agregar un controlador nuevo pero no se que mas sigue. Tendrás algo de como hacerlo? te lo agredeceria mucho.

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre