Ajouter du code Javascript en ligne dans Drupal 9

Dans nos projets Drupal, nous avons de telles exigences pour ajouter une sorte de code javascript en ligne, comme ajouter un script GTM. Cela peut être dans l’en-tête de la page ou le bas de la page selon les exigences. Donc, dans le blog, nous verrons comment nous pouvons y parvenir par les deux méthodes.

Drupal fournit des crochets pour le faire de manière appropriée. Pour ajouter le code javascript en ligne dans l’en-tête de la page, nous pouvons utiliser hook_page_attachments()et pour le bas de la page, nous pouvons utiliser le crochet hook_page_bottom()

Comprenons cela avec des exemples.

Méthode 1 : ajouter du code Javascript en ligne dans l’en-tête de la page

/**
* Implements hook_page_attachments().
*/
function MYMODULE_page_attachments(array &$attachments) {
// You can optionally perform a check to make sure you target a specific page.
if (\Drupal::routeMatch()->getRouteName() == 'some.route') {
// Add our JS.
$attachments['#attached']['html_head'][] = [
[
'#tag' => 'script',
'#attributes' => [
'type' => 'text/javascript',
],
'#value' => \Drupal\Core\Render\Markup::create('console.log(“This” is my javascript code);’),
],  'key_for_this_snippet',
];
}
}

Méthode 2 : Ajouter du code Javascript en ligne en bas de page

/**
* Implements hook_page_bottom().
*/
function MYMODULE_page_bottom(array &$page_bottom) {
$user = \Drupal::currentUser();
$page_bottom['pixelthis_sticky_banner'] = [
'#markup' => \Drupal\Core\Render\Markup::create('console.log(“This” is my javascript code);’),
'#cache' => [
'contexts' => ['user'],
'tags' => ['user:' . $user->id()],
],
];
}

Vous pouvez ajouter ce script JS pour global ou spécifique à une page selon vos besoins. Pour cela, ajoutez des conditions avant de rendre le balisage. De plus, nous pouvons ajouter la même chose en utilisant route et controller.

Si vous avez encore des questions, laissez un commentaire et rejoignez la discussion. J’ajouterai différentes manières dans les prochains blogs. Restez à l’écoute.