Transmettre une variable php à une librairie JS dans un module Drupal

Drupal 8

Transmettre une variable php à une librairie JS dans un module Drupal

Soumis par Antoine le dim 12/04/2020 - 18:13

Dans ce tuto Drupal, nous allons apprendre à transmettre une variable php à une librairie JS. Pour pouvoir suivre ce tuto, vous devez savoir déclarer et attacher une librairie à votre module

Méthode

  • Déclarer une librairie avec une dépendance core/drupalSettings
  • Rajouter les variables au render array auquel est attachée la librairie
  • Utiliser les variables dans le javascript

Déclarer une librairie avec une dépendance core/drupalSettings

Pour transmettre du php à une librairie js, il faut utiliser DrupalSettings, un tableau défini en php, accessible aux librairies auxquelles on a rajoutées la dépendance "core/drupalSettings". La déclaration de librairie "global" du module "premiermo" devient

Fichier premiermo.libraries.yml
global:
  version: 1.x
  js:
    js/monfichier.js: {}
  dependencies:
    - core/drupalSettings

Rajouter les variables au render array auquel est attachée la librairie

Ensuite, il faut rajouter dans le render array qui a servi à rattacher la librairie, le tableau drupalsettings :

$mes_variables_a_transmettre = [
  'premiere' => 'coucou',
  'seconde' => $json,
];

$build['#attached']['library'][] = 'premiermo/global';
$build['#attached']['drupalSettings']['premiermo']['global'] = $mes_variables_a_transmettre ;

Pour accéder aux valeurs des champs d'un node dans la fonction preprocess "monmodule_preprocess_node__type_node(&$variables){}" il faut récupérer le nœud dans la variable "variables" de la façon suivante 

$variables['node']->nom_machine_champ->value,

Utiliser les variables dans le javascript

Dans le code javascript, du fichier global.js, il est possible d'accéder aux variables "drupalSettings.premiermo.global.premiere" et "drupalSettings.premiermo.global.seconde". Par exemple, il est possible de faire un console.log() sur la variable premiere

console.log(drupalSettings.premiermo.global.premiere)

 

Version