Icono del sitio Daniel Ruiz

Modulos Prestashop: crear hooks con carga selectiva de javascript/css

Hola!!!

Traigo un truquillo de los módulos Prestashop. Llevaba tiempo detrás de esta solución y, la verdad, no la encontraba por ningún sitio.

Se trata de que muchos nos dicen cómo crear HOOKS para nuestros módulos pero lo que no nos explican es cómo en los nuevos hooks podemos cargar javascripts y/o CSS.

  1. Si creamos nuestra función install con un hook nuevo:
    public function install()
    {
        return (parent::install() && $this->registerHook('buscadorPortada')
    }

  2. La función relativa asociada a este hook:
    public function hookBuscadorPortada()
    {
    ....
    }

  3. Y ahora ¿cómo mostramos este nuevo hook en nuestra plantilla? Supongamos que este buscador lo queremos solamente en la portada… pues abrimos el index.tpl e incluimos el hook…
    {hook h='buscadorPortada'}

  4. Donde hemos colocado esa línea se traducirá en aquel HTMl que devuelva la función hookBuscarPortada de más arriba
  5. Ahora vamos a dicha función del hook ¿cómo cargar un js/css solamente para aquellas páginas en las que se llama a este hook?
    public function hookBuscadorPortada()
    {
        ...
        $this->context->controller->addJS(_MODULE_DIR_.'nuestromodulo/js/nuestrohook.js');
        $this->context->controller->addCSS(_MODULE_DIR_.'nuestromodulo/css/nuestrohook.css');
    
        $this->context->smarty->assign('css_files', $this->context->controller->css_files);
        $this->context->smarty->assign('js_files', array_unique($this->context->controller->js_files));
        ...
    }
  6. Sin las dos últimas lineas, el addJS y addCSS no harán que nuestro css o js realmente se incluyan en el HTML generado final

¿Qué os parece?

Creo que es un buen truco ¿no? A mi por lo menos me funciona, decidme si no me he sabido explicar y me corrijo

Saludos!!!

Salir de la versión móvil