Recientemente, en un proyecto que estoy desarrollando en Drupal 9, tuve que buscar la manera de integrar parte del código, con llamadas realizadas en JavaScript hacia un servidor de Sharepoint, sin la necesidad de implementar webservice, la idea era reaprovechar un código que ya funcionaba correctamente, sin guardar nada en la base de datos de Drupal y como requisito adicional, debía utilizar una librería de Jquery diferente a la que trae el núcleo de Drupal 9, para ser más específico, se trataba de la versión "jquery-3.5.1.min.js".
El objetivo de este desarrollo era realizar varias llamadas al servidor externo, aprovechando la modificación de una línea del código, para obtener el resultado que íbamos a mostrar dentro de la página, o sea, que en lugar de cargar la librería en el archivo "MITEMA.libraries.yml", haciendo una llamada al "global-styling", para que estuviera accesible desde cualquier punto de la web, opté por llamar directamente en las plantillas específicas al archivo "codigo_personalizado.js", sin tener que cargarlo innecesariamente.
Por esta razón he querido compartir los pasos que deberás seguir, primero para añadir en tu proyecto Drupal 9, una librería de jquery diferente a la que tienes en el núcleo de Drupal, y luego, mostrarte cómo realizar las llamadas a tus archivos js, desde la o las plantillas ".twig" que tengas en tu proyecto.
Si quieres saber más sobre el uso de librerías de javascript y Css, puedes visitar la Página oficial de Drupal, donde también te lo cuenta con varios ejemplos, para que puedas elegir el que más te convenga.
PASOS PARA INSTALAR UNA LÍBRERÍA JQUERY EXTERNA EN TU TEMA PERSONALIZADO:
Lo primero que deberías saber es Cómo crear un tema personalizado con Bootstrap 3 o Cómo crear un tema personalizado con Bootstrap Barrio, así podrás familiarizarte con los archivos que componen un tema y entenderás más fácilmente la forma de aplicar cambios, como la creación de librerías.
PASO 1 AÑADIR LA LIBRERÍA EN EL ARCHIVO LIBRARIES DEL SUBTEMA:
Partiendo de que ya tienes un subtema instalado en tu proyecto, si quieres añadir una librería externa, bastará con que copies el código que te muestro a continuación, en la parte inferior del archivo donde definimos las librerías del tema, ej.: "MITEMA.libraries.yml", recordando siempre el uso de los espacios, porque de lo contrario los archivos .yml no funcionarán.
jquery-custom:
remote: https://github.com/jquery/jquery
version: "3.5.1"
license:
name: MIT
url: https://github.com/jquery/jquery/blob/3.5.1/LICENSE.txt
gpl-compatible: true
js:
js/jquery-3.5.1.min.js: { minified: true, weight: -20 }
Con este código le estamos asignado el nombre "jquery-custom", a nuestra libería y de esta forma podremos llamarla desde cualquier plantilla, mediante el código siguiente:
PASO 2 LLAMAR A LA LIBRERÍA DESDE LA PLANTILLA:
Dentro de la plantilla que quieras llamar a la librería o archivos js que quieras, tendrás que colocar el siguiente código, sustituyendo el nombre del tema, por el que haz utilizado para tu proyecto.
{# In a Twig template we attach the library. #}
{{ attach_library('MITEMA/jquery-custom') }}
CÓMO CREAR ARCHIVOS JAVASCRIPT Y FUNCIONES DENTRO DE DRUPAL 9:
Lo último que te quiero contar, es cómo puedes añadir tus propias funciones de javascript, sin tener conflictos de código. Ahora que ya sabes la forma de agregar una librería de Jquery, diferente a la versión de tu proyecto, lo que nos falta es cómo intengrar funciones o código dentro de mi tema para que se ejecute correctamente.
Una vez creado el archivo con el nombre ej: "codigo_pesonalizado.js", y colocado en la carpeta correspondiente dentro de tu tema, ya sólo nos queda comenzar a escribir el resto de nuestro desarrollo.
(function ($, Drupal) {
'use strict';
Drupal.behaviors.micodigo = {
attach : function(context, settings) {
//PUEDES PONER AQUÍ TU CÓDIGO
}
};
})(jQuery, Drupal);
A partir de ahora ya podrás añadir funcionalidades de JavaScript o Jquery, dentro de cualquier tipo de plantilla en Drupal 9, ofreciendo mayores alternativas y soluciones para todos tus proyectos.
Si quieres conocer un poco más visitando la página oficial de Drupal, HAZ CLIC AQUÍ