Añadir javascript y css en los módulos en Prestashop 1.7

Introducción (Leer atontados)

Imaginemos que estamos desarrollando un módulo para Prestashop 1.7, y queremos añadir un fichero javascript o una hoja de estilos dentro del módulo.

Vamos a montar un pequeño ejemplo de cómo añadir Javascript y Hojas de estilos a los módulos.

Evidentemente es un “mini ejemplo”. (Siento las erratas, pero he realizado el documento deprisa y corriendo)

Añadir Hook para insertar librerías JS y CSS de los módulos

Tenemos varias opciones, una de ellas es dentro de la función “install” del módulo que estuvimos comentando en su momento, añadir:

$this->registerHook('displayHeader')

De esta manera indicamos que el módulo se instalara en el displayHeader, que es donde se suelen cargar habitualmente las hojas de estilos, ficheros js, etc..

En la misma clase del módulo, también debemos añadir la función:

public function hookdisplayHeader($params)
{
}

Indicando los ficheros JS del módulo que queremos añadir.

Esto lo añadimos dentro de la función “public function hookdisplayHeader($params)” que hemos creado antes.

$this->context->controller->registerJavascript('modules-nombrelibreria', 'modules/'.$this->name.'/js/fichero.js',['position' => 'bottom', 'priority' => 150]);

Estamos usando “$this->context->controller->registerJavascript” para registrar ficheros javascript dentro del módulo:

  • “modules-nombrelibreria“, por ejemplo si el fichero se llama “fichero.js” aquí indicamos el nombre “modules-nombrefichero(sin extensión) “.
  • Directorio modules + nombre del módulo ($this->name) + directorio “js” del módulo + nombredelFichero
    modules/'.$this->name.'/js/fichero.js
  • ‘position’ => ‘bottom’ –> javascript carga al final de la página.
    Si queremos que cargue directamente en el head y no al final de la página colocamos ‘head’
    priority -> Si cargamos varias librerias JS, cuanto mas alto es el número más abajo cargara la librería en comparación otras librerias JS del mismo módulo.

    ['position' => 'bottom', 'priority' => 150]
    

 

Añadir ficheros CSS a los módulos

(Recordar dentro de la función public function hookdisplayHeader($params))

Para registrar las hojas de estilo usamos ” $this->context->controller->registerStylesheet

$this->context->controller->registerStylesheet('modules-nombrelibreria', 'modules/'.$this->name.'/css/fichero.css', ['media' => 'all', 'priority' => 150]);
  • modules-nombrelibreria“, por ejemplo si el fichero se llama “fichero.css” aquí indicamos “modules-nombrefichero(sin extensión)”.
  • Directorio modules + nombre del módulo ($this->name) + directorio “css” del módulo + nombredelFichero
  • Indicamos el parámetro “media” de la hoja de estilo:
    'media' => 'all'
    
    • all -> todos los medios definidos -> Mas información sobre el parámetro media, lo podéis ver directamente aquí: https://librosweb.es/libro/css/capitulo_1/medios_css.html (Ya depende de vosotros lo que vayáis a poner)
  • (Prioridad) Si cargamos varias hojas de estilo, cuanto mas alto el número mas abajo cargara en comparación con otras hojas de estilo del mismo módulo.
    'priority' => 150
    

Documento construido bajo Prestashop 1.7.1.0

Print Friendly