Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

Ultima revisión 28/11/2012

Crear módulo con panel de configuración en PrestaShop

Hace unos días os explicaba en el artículo Crear un Módulo en PrestaShop: Mi primer Módulo como crear un módulo de PrestaShop sencillo. Hoy, sin embargo, os explicaré cómo hacer uno más complejo incluyendo un panel de configuración.

En primer lugar, tener en cuenta que este ejemplo es una modificación del ejemplo Crear un Módulo en PrestaShop: Mi primer Módulo y que, por consiguiente, habrá que hacer los pasos descritos en el artículo antes de empezar con este. Dicho esto, primeramente tendremos que crear un PHP de Administración que se llamara como eel módulo incluyendo la palabra Admin delante, es decir, que si el módulo es ModuleTesting, el archivo se debería llamar AdminModuleTesting. En este archivo nuevo, lo que se declara es una extensión de la clase AdminTab que le indica a PrestaShop que el módulo que estamos generando va a tener un panel de configuración asociado. El código siempre será el mismo. eso si, cambiando el contenido de la variable $module y poniendo lo que se quiera mostrar en el método display(). Para ello sólo hay que introducir el siguiente código:

<?php
include_once(PS_ADMIN_DIR.'/../classes/AdminTab.php');
class AdminModuleTesting extends AdminTab
{
  private $module = 'ModuleTesting';

  public function __construct()
  {
    global $cookie, $_LANGADM;
    $langFile = _PS_MODULE_DIR_.$this->module.'/'.Language::getIsoById(intval($cookie->id_lang)).'.php';
    if(file_exists($langFile))
    {
      require_once $langFile;
      foreach($_MODULE as $key=>$value)
        if(substr(strip_tags($key), 0, 5) == 'Admin')
          $_LANGADM[str_replace('_', '', strip_tags($key))] = $value;
    }
    parent::__construct();
  }

  public function display()
  {
    echo $this->l('Variable 1').'<p class="center">'.Configuration::get('MOD_VARIABLE1').'</p>';
  }
}
?>

Como vemos la variable $module contiene el nombre de la clase que declaramos en el módulo de PrestaShop y en el método display() hemos dicho que se muestre el contenido de la variable MOD_VARIABLE1 que pertenece a nuestra configuración.

Seguidamente crearemos o copiamos un archivo de imagen uno para la administración del módulo para que se llame AdminModuleTesting.gif. Es el icono que saldrá a la izquierda cuando entremos a listar los módulos en la carpeta de Administración del PrestaShop. Luego la utilizaremos en método el installModuleTab.

Ahora nos vamos a la clase principal del módulo (al archivo ModuleTesting.php) y sustituimos los métodos de install y uninstall por los siguientes:

public function install(){
    if(!parent::install() || !$this->registerHook('leftColumn') || 
    !Configuration::updateValue('MOD_VARIABLE1', "SIN_VALOR") || 
    !$this->installModuleTab('AdminModuleTesting', array(1=>'Configuración ModuleTesting', 2=>''), 2)) return false;
}

public function uninstall(){
    if(!parent::uninstall() || !Configuration::deleteByName('MOD_VARIABLE1') ||
    !$this->uninstallModuleTab($this->module_adminName)) return false;
    return true;
}

Cada variable que queramos controlar en el panel de configuración de nuestro módulo debe llevar una replica de las instrucciones que contienen la palabra MOD_VARIABLE1. Por tanto si existiese MOD_VARIABLE2 las instrucción del método uninstall() debería tener un Configuration::deleteByName('MOD_VARIABLE2') añadido. Lo mismo pasaría con el método install().

Una vez hecho esto, pasamos a crear un método que llamaremos getContent() que es el que se nos mostrará cuando pinchemos para ver la configuración de nuestro módulo.

public function getContent(){
    $html = '';
    if(Tools::isSubmit('submit'.$this->module_name)){
        if(Validate::isUrl(Tools::getValue('MOD_VARIABLE1'))){
            Configuration::updateValue('MOD_VARIABLE1',     Tools::getValue('MOD_VARIABLE1')); 
        } else { 
            $html .= $this->displayError($this->l('invalid User Name')); 
        }
        $html .= $this->displayConfirmation($this->l('Successfully saved configuration.'));
    }        

    $MOD_VARIABLE1    = Configuration::get('MOD_VARIABLE1');
    $html .= '
    <form name="AdminModuleTesting_frm" id="AdminModuleTesting_frm" action="'.$_SERVER['REQUEST_URI'].'" method="post">
        <h2 title="'.$this->l('Module Testing Settings').'"><img src="http://www.tuweb.com/images/logo.png" /></h2>
        <fieldset>
            <legend>'.$this->l('Configuration').'</legend>
            <table class="table2" width="700">
                <tbody>
                    <tr>
                        <td>
                            <label>'.$this->l('Variable 1').'</label>
                        </td>
                        <td width="30">
                            <input type="text" name="MOD_VARIABLE1" id="MOD_VARIABLE1" value="'.$MOD_VARIABLE1.'" />
                        </td>
        </fieldset>
    </form>';
    return $html;
}

Los métodos getValue y updateValue leen o actualizan la variable que queremos controlar. El formulario es el que se mostrará cuando, desde la pestaña de módulos d Prestashop, pulsemos en la opción de Configurar situada en la parte inferior de nuestro módulo.

Ahora crearemos los métodos para instalar y desinstalar el Panel de Configuración del módulo. Tanto installModuleTab como uninstallModuleTab tienen siempre el mismo código para todos los módulos exceptuando en nombre de la imagen .gif que puede cambiar. En este caso, utilizamos como nombre de imagen AdminModuleTesting.gif como habíamos mencionado anteriormente.

private function installModuleTab($tabClass, $tabName, $idTabParent){
    @copy(_PS_MODULE_DIR_.strtolower($this->name).'/AdminModuleTesting.gif', _PS_IMG_DIR_.'t/'.$tabClass.'.gif');
    $tab = new Tab();
    $tab->name = $tabName;
    $tab->class_name = $tabClass;
    $tab->module = $this->name;
    $tab->id_parent = $idTabParent;
    if(!$tab->save()) return false;

    return true;
} 

private function uninstallModuleTab($tabClass){
    $idTab = Tab::getIdFromClassName($tabClass);
    if($idTab != 0){
        $tab = new Tab($idTab);
        $tab->delete();
        @unlink(_PS_IMG_DIR_.'t/'.$tabClass.'.gif');
        return true;
    }

    return false;
}

Instalación del módulo

La instalación del módulo es sencilla.

Si habéis creado el módulo en vez de modificarlo, primero nos dirigimos a la url de Administración, nos logamos y pinchamos en la opción de Módulos de la pestaña Módulos.

Una vez dentro, en el campo buscar, escribimos el displayName que pusimos en nuestro módulo, en este caso, Módulo de Pruebas y le damos al botón BUSCAR.

Si nos fijamos veremos que hay un recuadro en el que remarca que no está instalado y a la derecha hay un botón que pone instalar. Si le damos, se instalará y nos tendrá que decir un mensaje como Módulo (s) instalado con éxito.

Prueba y ejecución del módulo

Ahora probamos que se ejecute en nuestra tienda de pruebas. Si lo queremos ver estará en la parte de debajo de la columna izquierda en el front-end de la tienda.

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.