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!!!

10 comentarios

  1. Hola,
    Gracias por el aporte, esto debería ser obligatorio para una buena optimización de prestashop, cargamos muchísimas cosas innecesarias,
    El ejemplo es muy claro, pero yo no he conseguido hacerlo funcionar, lo tengo que cargar en el hook top para tener mis css y js, con el consiguiente problema de que los tengo siempre cargados.
    ¿Podrías dar mas detalles? me parece esto bastante interesante.

    Gracias

  2. Hola Antonio:

    Gracias por escribir en mi blog.

    Explica con más detalle por favor qué es lo que quieres conseguir…

    Yo lo que trato de explicar aquí es cargar js/css para los hooks personales que uno mismo crea con un módulo…

    ¿qué te parece?

  3. Hola Daniel,
    Si lo que me refería es que con un hook personalizado no soy capaz de cargar los css y js, si lo registro en el hook Header si, pero claro, ya lo cargas para toda la web no donde llamo solo a ese hook personalizado.
    Vamos que no consigo hacer una caga selectiva, he probado como dices en tu articulo pero nada.

    Gracias y saludos

    1. Pues no se cual podrá ser la razón por la que no te funcione este código ¿haces exactamente lo que pongo en el manual?

      Yo esto no solo lo probé sino que lo depuré funcionando a la perfección y lo uso a diario…

  4. Buenas,

    Realmente es un modulo más dentro de Prestashop que al arrancar te lo prepara. El único punto negativo es que el titulo puede llevar a la confusion, no es que sea «con carga selectiva de javascript/css», seria más bien «con carga definida de tu propio javascript/css».

    Por otro lado advertir que este código para alguien que no sepa lo intentará y no le funcionará, pero revisad que en el código a simple vista hay un detalle (quito los comentarios para que se aprecie:

    Codigo aportado:
    public function install()
    {
    return (parent::install() && $this->registerHook(‘buscadorPortada’)
    }

    public function hookBuscadorPortada()
    {
    ….
    }
    {hook h=’buscadorPortada’}

    Codigo Corregido:
    public function install()
    {
    return (parent::install() && $this->registerHook(‘BuscadorPortada’)
    }

    public function hookBuscadorPortada()
    {
    ….
    }
    {hook h=’BuscadorPortada’}

    ————————————–

    Hay que tener especial cuidado con las mayusculas y minusculas, ya que el sistema es keysensitive y no apunta al nombre si no son identicos.

    Un saludo.

    P.D.: Buen aporte!

    1. Hola Jordi! Si que es sensible a mayúsculas, pero creo que lo que dices no es correcto…

      Cuando creamos un hook llamado ‘buscadorPortada’ el hook debe declararse tal y como digo ‘hookBuscadorPortada’ y se sigue llamando cómo el primero… Este código lo he extraído de la propia experiencia… Es por ello que se que funciona… Pero también funciona lo que dices? La verdad es que no lo he probado así nunca…

      Gracias por leerme!

  5. No soy usuario experto, pero tampoco novel. Y, sinceramente, llevo un rato alrededor del código y no logro a entender bien tu explicación (ni implementarla). Creo que podrías/deberías mejorarla. Un saludo!

    1. Hola Andrés, toda la explicación esta alrededor de la creación de módulos de prestashop.
      Por otro lado cuando creas un hook, es necesario reinstalar el módulo con el backend de dicho prestashop.

      Con esto el hook ya te funcionara.

      Un saludo!

  6. hola Daniel , saludos, y si deseo agregar informacion personalidad a ese HOOK? como lo hago ? si para ejemplos practicos quisiera que en ese HOOK se mostraran las categorias en un SELECT (COMBOBOX), como puedo hacer? que archivos debo modificar ? donde debo construir la sentencia SELECT * FROM ps_categories?

Dejar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.