Extra Block Types (EBT) - Nueva experiencia con Layout Builder❗

Extra Block Types (EBT): tipos de bloques con estilo y personalizables: Presentaciones de diapositivas, Pestañas, Tarjetas, Acordeones y muchos más. Configuraciones integradas para fondo, DOM Box y plugins de JavaScript. Experimenta hoy el futuro de la construcción de diseños.

Módulos de demostración EBT Descargar módulos EBT

❗Extra Paragraph Types (EPT) - Nueva experiencia con Paragraphs

Extra Paragraph Types (EPT): conjunto de módulos basado en párrafos de forma análoga.

Módulos de demostración EPT Descargar módulos EPT

Scroll

6.8. Trabajo con JavaScript/jQuery en Drupal. ¿Qué son los behaviors?

04/05/2025, by Ivan

Para comenzar, recordemos cómo incluir archivos JavaScript personalizados en nuestro tema. En el archivo .libraries.yml necesitas incluir la clave js:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once

Es importante respetar la indentación de dos espacios. Así hemos incluido el archivo js/custom.js, pero esto no es suficiente para que jQuery funcione. Drupal no lo incluye por defecto, por lo tanto debe ser agregado explícitamente:

dependencies:
  - core/jquery

También usaremos jQuery.once(), un plugin adicional que permite ejecutar eventos o acciones solo una vez por elemento:

dependencies:
  - core/jquery
  - core/jquery.once

Esto es importante porque en Drupal el código JavaScript puede ejecutarse varias veces, especialmente en interacciones AJAX. Por eso usamos el método .once().

Agregando código en el archivo custom.js

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      $(context).find('.click-me').once('myCustomBehavior').click(function () {
        alert('¡Hola, mundo!');
      });
    }
  };
})(jQuery);

Encerramos el código jQuery en esta función porque Drupal ejecuta jQuery en modo .noConflict(), lo que evita conflictos con otras bibliotecas como Prototype o MooTools. Así, podemos usar el signo $ sin problemas dentro de nuestro contexto.

¿Qué son los behaviors en Drupal?

Si escribes código jQuery en Drupal, debes envolverlo en un behavior. El nombre del behavior debe ser único, como en el ejemplo myModuleBehavior. Puedes definir múltiples behaviors:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Tu código aquí.
    }
  };

  Drupal.behaviors.productPageBehavior = {
    attach: function (context, settings) {
      // Otro código aquí.
    }
  };
})(jQuery);

Usa notación camelCase para nombrarlos. Los behaviors se ejecutan cuando se carga la página y con cada solicitud AJAX. Esto los hace muy diferentes de:

$(document).ready(function () {
  // No se recomienda en Drupal.
});

El uso de .once() previene la ejecución duplicada del comportamiento:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      $('.inner').once('add-paragraph').append('<p>Prueba</p>');
    }
  };
})(jQuery);

Uso de context en los behaviors

Cada vez que Drupal carga contenido mediante AJAX, el nuevo contenido es accesible a través de la variable context. Así no necesitas recorrer todo el DOM cada vez, solo usar:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      $(context).find('.inner').once('add-paragraph').append('<p>Prueba</p>');
    }
  };
})(jQuery);

Ahora el comportamiento está implementado correctamente según el estilo de Drupal. Aunque puedes usar $(document).ready(), no se recomienda porque solo se ejecuta una vez y no con AJAX.

Si tienes preguntas sobre jQuery/JavaScript o sugerencias para nuevos temas, escríbelas en los comentarios.