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.
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 proyectoCreando 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 type: Evidentemente, el tipo de módulo. Aquí pondremos Generic module.
- Module tab: Aquí especificaremos mejor la categoría del módulo que queremos. Elegimos Front Office Features.
- Module name: El nombre del módulo, es decir, el de la carpeta que irá en el directorio modules.
- Display name: El nombre que se mostrará en la lista de módulos del Back-office.
- Description: La descripción del módulo que se mostrará bajo el nombre de éste en el back-office.
- Author: El nombre del autor del módulo.
- 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:
- Confirm uninstall: Podemos elegir si se mostrará un mensaje de confirmación cuando desinstalemos el módulo.
- 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".
- 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".
- Compliancy min: La versión mínima de Prestashop compatible con el módulo que va a ser creado.
- 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:
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:
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.
Hola , Gracias he seguido los pasos y todo perfecto tengo el nuevo tab, pero como lo enlazo a un enlace o contenioddo, soy novato.
ResponderEliminarHola, si te refieres a que aparezca contenido al hacer clic en el Tab se explica en el tutorial.
EliminarEl contenido se inserta en una plantilla tpl, y ésta es llamada desde el archivo newtabsps.php
Gracias popr responder, te refieres a este codigo
ResponderEliminardata-toggle="tab" href="#newtabsps" class="newtabsps">{l s='Mi Tab'}
el href="#newtabsps" lo puedo cambiar por otra direccion, es eso
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.
EliminarHola. 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