Crear módulos para Prestashop con la herramienta "Module Generator" de Prestashop

02 marzo, 2015 |

Si te gusta, compártelo ;)

Solución slide de precio del módulo navegación por facetas de Prestashop

Prestashop pone a nuestra disposición una estupenda herramienta gratutita para crear módulos llamada Module Generator.

En este tutorial vamos a aprender a utilizar este herramienta para crear un módulo que luego instalaremos para probar su funcionamiento. Utilizaremos este módulo para crear una nueva pestaña (tab) en la pantalla de inicio de Prestashop 1.6; como podemos ver en la siguiente imagen.

Agregar pestaña (tab) en Prestashop 1.6

Este es solo un ejemplo muy simple, la complejidad que le demos al módulo creado depende de los conocimientos de cada uno.


Compatibilidad: Prestashop 1.6

Descargar los archivos del proyecto
Compatible con la plantilla por defecto de Prestashop 1.6

Creando el módulo con "Module Generator"

Lo primero que debemos hacer es visitar esta dirección Module Generator. Si no estamos registrados, deberemos hacerlo, si ya lo estamos, nos logueamos en la página.

Veremos la siguiente pantalla:

Module generator de Prestashop, paso 1.
  1. Module type: Evidentemente, el tipo de módulo. Aquí pondremos Generic module.
  2. Module tab: Aquí especificaremos mejor la categoría del módulo que queremos. Elegimos Front Office Features.
  3. Module name: El nombre del módulo, es decir, el de la carpeta que irá en el directorio modules.
  4. Display name: El nombre que se mostrará en la lista de módulos del Back-office.
  5. Description: La descripción del módulo que se mostrará bajo el nombre de éste en el back-office.
  6. Author: El nombre del autor del módulo.
  7. Version: La versión del módulo que vamos a crear. Por si hay dudas, no importa lo que pongamos.

Cuando hayamos rellenado todos los campos clicaremos en "Next" para pasar al segundo paso:

Module generator de Prestashop, paso 2.
  1. Confirm uninstall: Podemos elegir si se mostrará un mensaje de confirmación cuando desinstalemos el módulo.
  2. Create default database table: Podemos elegir si se instalará una tabla en la base de datos de Prestashop. Para este tutorial lo dejé en "No".
  3. Need instance: Podemos elegir si la clase principal del módulo se cargará en la página de módulos del back-office. Seleccionar "No".
  4. Compliancy min: La versión mínima de Prestashop compatible con el módulo que va a ser creado.
  5. Compliancy max: La versión máxima de Prestashop compatible con el módulo que va a ser creado.

Estas opciones no son importantes. Cuando hayamos terminado con este paso clicamos en "Next". Veremos la siguiente pantalla:

Module generator de Prestashop, paso 3

En este último paso elegiremos en qué hooks queremos que se registre el módulo. Seleccionar los que vemos en la imagen. Por último, clicar en "Create". Se descargará el módulo empaquetado en formato .zip en nuestro ordenador.

Instalando el módulo...

Una vez tengamos el módulo, lo descomprimimos y colocamos la carpeta resultante en el directorio modules de nuestro Prestashop.

Hecho esto, vayamos a la sección "Módulos" del Back-office de Prestashop y busquemos nuestro módulo para instalarlo:

Instalar módulo creado con la herramienta Module generator de Prestashop
Si al instalar el módulo aparece un mensaje advirtiendo de que el módulo no puede ser verificado por Prestashop, hacemos caso omiso y seguimos con la instalación, no hay ningún peligro.

Aunque si nos sentimos más seguros podemos hacer un backup de la tienda antes de instalar el módulo.

Cuando instalemos el módulo veremos la página de configuración del módulo. Aquí no es necesario tocar nada, por ahora hemos terminado con el Back-office de Prestashop.

Modificando los archivos de nuestro módulo...

Uno de los archivos del módulo que hemos creado, y al que debemos prestarle atención, es el llamado newtabsps.php. Se llama igual que el módulo y es el archivo principal de éste, es el que se encarga (entre otras cosas) de funciones tan importantes como instalar el módulo, crear las bases de datos y registrar los hooks en el Back-office de Prestashop etc...

Pues bien, debemos abrir este archivo, que se encuentra en la carpeta raíz del módulo que hemos creado. Una vez abierto, debemos buscar estas dos funciones:

public function hookDisplayHomeTab()
 {
  /* Place your code here. */
  
 }

 public function hookDisplayHomeTabContent()
 {
  /* Place your code here. */
  
 }

Desde estas dos funciones se mostrará el contenido que debe ir en cada hook que habíamos creado previamente con la herramienta "Module Generator". Así que, desde cada función debemos llamar a una plantilla .tpl que mostrará el contenido en sí. Por lo tanto debemos escribir en cada función una linea que llamará a las plantillas, de forma que quede así:

public function hookDisplayHomeTab()
 {
  /* Place your code here. */
  
  return $this->display(__FILE__, 'tab.tpl');
 }

 public function hookDisplayHomeTabContent()
 {
  /* Place your code here. */
  
  return $this->display(__FILE__, 'tab_content.tpl');
 }

Estas dos líneas llamarán a las plantillas que contienen el contenido, pero todavía no las hemos creado, asi que, hagámoslo.

Creando las plantillas .tpl

Debemos crear una carpeta llamada front en ../prestashop/modules/newtabsps/views/templates
Dentro de esta carpeta crearemos las dos plantillas, debemos llamarlas tab.tpl y tab_content.tpl.

Aunque el contenido de las plantillas depende del uso que le vayamos a dar, y sobre todo, de los conocimientos de cada cual, aquí solo vamos a mostrar un ejemplo sencillo. Simplemente vamos a añadir una pestaña más (tab) a la página de inicio de Prestashop, por lo que el contenido de la plantilla tab.tpl será este:

<li><a data-toggle="tab" href="#newtabsps" class="newtabsps">{l s='Mi Tab'}</a></li>

Para la plantilla tab_content.tpl este:

<ul id="newtabsps" class="newtabsps tab-pane">
 <li>
  {l s='Este es un mensaje de prueba'}
 </li>
</ul>

Y con esto ya hemos terminado de crear las plantillas, ha sido muy simple. Recordemos que las plantillas deben ir en esta ruta ../prestashop/modules/newtabsps/views/templates/front

Guardar cambios y comprobar el resultado en vuestra tienda.

5 comentarios:

  1. Hola , Gracias he seguido los pasos y todo perfecto tengo el nuevo tab, pero como lo enlazo a un enlace o contenioddo, soy novato.

    ResponderEliminar
    Respuestas
    1. Hola, si te refieres a que aparezca contenido al hacer clic en el Tab se explica en el tutorial.
      El contenido se inserta en una plantilla tpl, y ésta es llamada desde el archivo newtabsps.php

      Eliminar
  2. Gracias popr responder, te refieres a este codigo
    data-toggle="tab" href="#newtabsps" class="newtabsps">{l s='Mi Tab'}
    el href="#newtabsps" lo puedo cambiar por otra direccion, es eso

    ResponderEliminar
    Respuestas
    1. Eso no lo tienes que tocar. Solo tienes que insertar el contenido que quieras en la plantilla tab_content.tpl y ese contenido aparecerá al hacer clic en el nuevo tab.

      Eliminar
  3. Hola. En mi tema de prestashop necesitaría añadir un botón 'ver más productos' ya que en la home solo quiero que se muestren 4 o 5 pero me interesa que haya un boton ver más donde se muestren todos los productos. No se como tendría que hacer ésto...

    ResponderEliminar