Crear módulo en Prestashop 1.7

Análisis código de un módulo simple en Prestashop 1.7

Introducción (Importante atontados)

La persona que vaya mirar este “Tip” tiene que tener al menos un conocimiento básico de la programación orientada a Objetos 🙂

¿Qué módulo vamos analizar?

Vamos analizar el código de un módulo de redes sociales que podemos ver al lado del bloque de newsletter que aparece en la parte inferior de la tienda (displayFooter).

Es uno de los módulos más simples, ya que guarda 8 datos de redes sociales y luego muestra esa información en la tienda.

Para aquellos que no sepan a qué módulo me estoy refiriendo, hablo del módulo que señalo en la imagen:

Módulo redes sociales del pie de página de Prestashop

No voy a discutir sobre si la estructura de directorios que viene con el módulo es la más correcta, porque oficialmente no lo es, pero el módulo es oficial… (en la documentación oficial en el idioma de shakespeare tenéis como tiene que ser una estructura a día de hoy)

Por supuesto es una guía que le he dedicado 2 minutos y es posible que se hayan colado erratas que cuando tenga  tiempo las corregiré.

Lo que si voy hacer es documentar el módulo, tal como viene en Prestashop 1.7.1.0 con la versión “2.0.0” del módulo y explicar lo “más básico

Si entramos al directorio del módulo, lo primero que me encuentro es:

Estructura del módulo ps_socialfollow en Prestashop 1.7.1.0

  • translations
  • config.xml
  • config_es.xml
  • index.php
  • logo.png
  • ps_socialfollow.php
  • ps_socialfollow.tpl

Vamos analizar “dos ficheros” que son los más importantes, el fichero “ps_socialfollow.php” y el fichero “ps_socialfollow.tpl

Empezamos analizando el fichero “ps_socialfollow.php” que viene a ser la clase principal del módulo.

Indico que no he pegado todo el código del módulo, veréis que en el código original del módulo en algunas secciones tenéis la misma línea de facebook, pero para twitter, etc..

Análisis Inicial

use PrestaShop\PrestaShop\Core\Module\WidgetInterface;
  • Indicamos que vamos a usar la interfaz WidgetInterface, imprescindible si queremos construir un módulo para Prestashop 1.7
class Ps_Socialfollow extends Module implements WidgetInterface
  • .Definimos la clase del módulo llamada “Ps_Socialfollow” que hereda de la clase “Module” y que implementar la interfaz llamada “WidgetInterface
private $templateFile;
  • Variable privada que guardara en nuestro caso la localización de la plantilla de impresión del módulo (fichero tpl)

public function __construct()
{
$this->name = 'ps_socialfollow';
$this->author = 'PrestaShop';
$this->version = '2.0.0';
$this->bootstrap = true;
parent::__construct();
$this->displayName = $this->trans('Social media follow links', array(), 'Modules.Socialfollow.Admin');
$this->description = $this->trans('Allows you to add information about your brand\'s social networking accounts.', array(), 'Modules.Socialfollow.Admin');
$this->ps_versions_compliancy = array('min' => '1.7.1.0', 'max' => _PS_VERSION_);
$this->templateFile = 'module:ps_socialfollow/ps_socialfollow.tpl';
}

  • parent::__construct(); -> Accedemos al método de la clase Padre.
  • $this->name = ‘ps_socialfollow’ -> nombre módulo, debe llamarse igual que el directorio del módulo (mismo nombre que clase del modulo, pero en minúsculas).
  • $this->author = ‘PrestaShop’; -> Autor del módulo
  • $this->version = ‘2.0.0’; -> Versión del módulo
  • $this->displayName -> Nombre público del módulo
  • $this->description -> Descripción publica del módulo
  • $this->ps_versions_compliancy -> Indicar versión mínima compatible (min) y maxima compatible (max)
  • $this->templateFile -> Almacenamos en la variable “templateFile”  la localización del fichero “tpl” (plantilla de impresión) que vamos a usar en este módulo.
    • module es el directorio de módulos
    • ps_socialfollow es el nombre del directorio del modulo actual
    • ps_socialfollow.tpl es el nombre del fichero tpl que luego veremos en la tienda cuando vayamos a ver las redes sociales al lado del bloque de newsletter.

Función instalar Módulo

  public function install()
    {
        return (parent::install() &&
            Configuration::updateValue('BLOCKSOCIAL_FACEBOOK', '') &&
            $this->registerHook('displayFooter'));
    }
  • Función que se ejecuta nada mas instalar el módulo, que en nuestro caso hace realmente “2” cosas.
    • Inicializar/crear el valor de las 8 redes sociales.

      Configuration::updateValue('BLOCKSOCIAL_FACEBOOK', '')
      
    • Instala el módulo en el hook que esta situado en el pie de página

      $this->registerHook('displayFooter')
      

Función desinstalar Módulo

public function uninstall()
{
Configuration::deleteByName('BLOCKSOCIAL_FACEBOOK') &&
parent::uninstall());
}
  • Función que se ejecuta al desinstalar el módulo, elimina las variables/valores de las redes sociales:
    Configuration::deleteByName('BLOCKSOCIAL_FACEBOOK')
    

Función generar formulario de configuración del módulo

public function renderForm()
{
$fields_form = array(
'form' => array(
'legend' => array(
'title' => $this->trans('Settings', array(), 'Admin.Global'),
'icon' => 'icon-cogs'
),
'input' => array(
array(
'type' => 'text',
'label' => $this->trans('Facebook URL', array(), 'Modules.Socialfollow.Admin'),
'name' => 'blocksocial_facebook',
'desc' => $this->trans('Your Facebook fan page.', array(), 'Modules.Socialfollow.Admin'),
),
),
'submit' => array(
'title' => $this->trans('Save', array(), 'Admin.Global'),
)
),
);

$helper = new HelperForm();
$helper->show_toolbar = false;
$helper->table = $this->table;
$helper->submit_action = 'submitModule';
$helper->tpl_vars = array(
'fields_value' => $this->getConfigFieldsValues(),
);

return $helper->generateForm(array($fields_form));
}
  • Función que nos servirá para generar el formulario de configuración del módulo.
    • Definimos formulario
      'form' => array(
      'legend' => array(
      'title' => $this->trans('Settings', array(), 'Admin.Global'),
      'icon' => 'icon-cogs'
      ),
      
    • Definimos campos del formulario

      'input' => array(
      array(
      'type' => 'text',
      'label' => $this->trans('Facebook URL', array(), 'Modules.Socialfollow.Admin'),
      'name' => 'blocksocial_facebook',
      'desc' => $this->trans('Your Facebook fan page.', array(), 'Modules.Socialfollow.Admin'),
      ),
      
      • type -> Tipo de campo
      • label -> Etiqueta que aparecerá al lado del campo en el panel y que también utilizaremos luego en la tienda.
      • name -> Nombre interno del campo que nos servirá para obtener el valor del campo.
      • desc -> Descripción del campo que aparecerá en la configuración del módulo
    • Definimos botón de enviar el formulario

      'submit' => array(
      'title' => $this->trans('Save', array(), 'Admin.Global'),
      )
      
      • title -> Nombre del botón
    • Una vez hemos que hemos definido el formulario, sus campos, etc.. pasamos a generarlo.
      • Creamos objeto de la clase HelperForm con el que vamos a generar el formulario
        $helper = new HelperForm();
        
      • Tipo de acción al enviar el formulario:
        $helper->submit_action = 'submitModule';
        
      • Guardamos campos

        $helper->tpl_vars = array(
        'fields_value' => $this->getConfigFieldsValues(),
        );
        
      • Retornamos y generamos el formulario
        return $helper->generateForm(array($fields_form));
        

Función Obtener valores del formulario de configuración del módulo

public function getConfigFieldsValues()
{
return array(
'blocksocial_facebook' => Tools::getValue('blocksocial_facebook', Configuration::get('BLOCKSOCIAL_FACEBOOK')),

);
}
  • Almacenamos en un array los valores de las redes sociales:
    return array(
    'blocksocial_facebook' => Tools::getValue('blocksocial_facebook', Configuration::get('BLOCKSOCIAL_FACEBOOK')),);
    
    • “blocksocial_facebook” almacena el valor que hemos obtenido el formulario correspondiente a la dirección de la red social de facebook.
      • 'blocksocial_facebook' => Tools::getValue('blocksocial_facebook', Configuration::get('BLOCKSOCIAL_FACEBOOK')),
        
      • Fijaros dos cosas “blocksocial_facebook” es el nombre del campo que hemos definido en la función “renderForm” y BLOCKSOCIAL_FACEBOOK el campo/variable que hemos creado al instalar el módulo.


En el siguiente bloque vamos a usar 2 funciones que nos proporciona la Interfaz WidgetInterface una de ellas nos servirá para preparar los datos obtenidos y otra para luego poder mostrarlos en la tienda y usarlos en la plantilla (tpl)

Preparar datos obtenidos para luego poder usarlos

En la función getWidgetVariables:


public function getWidgetVariables($hookName = null, array $configuration = [])
{
$social_links = array();

if ($sf_facebook = Configuration::get('BLOCKSOCIAL_FACEBOOK')) {
$social_links['facebook'] = array(
'label' => $this->trans('Facebook', array(), 'Modules.Socialfollow.Shop'),
'class' => 'facebook',
'url' => $sf_facebook,
);
}
return array(
'social_links' => $social_links,
);
}
  •  Creamos un array que almacenara el valor de las redes sociales
    $social_links = array();
    
  • Igualamos valor variable sf_facebook  al valor que hemos obtenido en referencia a la red social Facebook
    if ($sf_facebook = Configuration::get('BLOCKSOCIAL_FACEBOOK'))  -> XXX
    
  • Almacenamos en el array los siguientes valores:
    $social_links['facebook'] = array(
    'label' => $this->trans('Facebook', array(), 'Modules.Socialfollow.Shop'),
    'class' => 'facebook',
    'url' => $sf_facebook,
    );
    
    • label -> Etiqueta/Nombre red social que se mostrara en la tienda
    • class -> Nombre de la clase (que luego se asignara en el fichero tpl al “<li>” para el tema de los estilos
    • url -> Dirección de la red social
  • Retornamos el array con los datos que hemos obtenido
    return array(
    'social_links' => $social_links,
    );
    

    Simplemente retornamos en la función el array con los datos de las redes sociales.


 

Pasar los datos para que podamos utilizarlos en el fichero tpl que mostrara las redes sociales en la tienda.

En la función renderWidget:

public function renderWidget($hookName = null, array $configuration = [])
{
if (!$this->isCached($this->templateFile, $this->getCacheId('ps_socialfollow'))) {
$this->smarty->assign($this->getWidgetVariables($hookName, $configuration));
}

return $this->fetch($this->templateFile, $this->getCacheId('ps_socialfollow'));
}
  • Cacheamos la plantilla (Comprobamos)
    $this->isCached($this->templateFile, $this->getCacheId('ps_socialfollow')
    
  • Asignamos las variables de las redes sociales para poder usarlas luego en la plantilla.

    $this->smarty->assign($this->getWidgetVariables($hookName, $configuration));
    
    • En $this->getWidgetVariables, obtenemos el array de los valores de las redes sociales. (Recordar que hemos trabajado con la función en el paso anterior)
  • Retornamos el fichero (la plantilla)

    return $this->fetch($this->templateFile, $this->getCacheId('ps_socialfollow'));
    
  • Aunque este ejemplo es un “mini ejemplo”, podemos comprobar que no vamos a crear funciones en este caso que nos vayan a retornar los valores por cada Hook, automáticamente el módulo cuando se instale en los hooks que hemos puesto en la función install, mostrara el contenido que hemos generado en la función getWidgetVariables que luego se la hemos pasado la función renderWidget para poder usar los valores en la plantilla.

 

Ver plantilla (fichero) que vemos en la tienda

Fichero: ps_socialfollow.tpl

Digo yo, que ahora tendremos que ver….. ¿Qué tenemos dentro del fichero: “ps_socialfollow.tpl” que es lo que luego vamos a ver en la tienda? ¿no?

<div class="block-social col-lg-4 col-md-12 col-sm-12">
<ul>
{foreach from=$social_links item='social_link'}
<li class="{$social_link.class}"><a href="{$social_link.url}" target="_blank">{$social_link.label}</a></li>
{/foreach}
</ul>
</div>
  • Bucle en Smarty que almacena en la variable social_link el valor del array social_links

    {foreach from=$social_links item='social_link'}
    
  • ¿Nos os acordáis que cuando hemos explicando la función “getWidgetVariables” almacenábamos en “class” un determinado valor (que por ejemplo facebook, era simplemente ‘facebook‘? Aquí vamos a imprimir ese valor 🙂 (Esto nos sirve luego por el tema de estilos)
    {$social_link.class}
    
  • El valor de la dirección de la red social, lo imprimimos aquí:

    {$social_link.url}
    
  • El valor del nombre de la red social, lo imprimimos aquí:
    {$social_link.label}
    
  • El bucle foreach lo cerramos aquí:
    {/foreach}
    

Documento basado en Prestashop 1.7.1.0 con la versión “2.0.0” del módulo.

3 comentarios sobre “Crear módulo en Prestashop 1.7”

  1. No me escuchas, pero desde mi casa estoy dando aplausos a tu artículo.

    Más de 10 años mostrando y enseñando tus conocimientos al mundo del eCommerce. Si supieras la de veces que te he encontrado solucionando consultas desde Prestashop 1.5, ¡me llamarías acosador! jaja

    Simplemente GRACIAS

Deja una respuesta

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