1

I need to convert the below code added in hook_page_attachments() and
add the external js in *.libraries.yml but not sure how to add variables like
$token and $user->mail in the *.libraries.yml so I can just attach library

   drupal_add_js('http://js.acobot.com/' . check_plain($token) . '.js', 'external');
    $script = 'var _aco = _aco || [];';
    drupal_add_js($script, array('type' => 'inline', 'scope' => 'footer'));
    if ($user->uid) {
      $user_info = "_aco.push(['email', '" . check_plain($user->mail) . "']);";
      drupal_add_js($user_info, array('type' => 'inline', 'scope' => 'footer'));
    }

Add Your Script to a file In *.libraries.yml, I have added

acobot-initialise:
  version: 1.x
  js:
    js/acobot.js: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

Added that file to the library under

$attachments['#attached']['library'][] = 'acobot/acobot-initialise';

Use drupalSettings to pass data from php to js

  $attachments['#attached']['drupalSettings']['acobot']['email'] = check_plain($account->getEmail());

Added script acobot.js as follows

(function ($, Drupal, drupalSettings) {

'use strict';

Drupal.behaviors.acobot = { attach: function (context, settings) { var _aco = _aco || []; _aco.push(['email', drupalSettings.acobot.email]);
} };

})(jQuery, Drupal, drupalSettings);

  • 1
    You can’t - add your script to a file, and add that file to your library, then use drupalSettings to pass data from php to js – Clive Apr 13 '18 at 7:28
  • @clive, I have tried to follow your comments, if possible can you validate if what I have implemented is matching as per your recommendations – harshal Apr 13 '18 at 11:44
  • You can do that better than I can - execute the code, and see the results – Clive Apr 13 '18 at 12:09
2

First add your acobot script inline:

function mymodule_page_attachments(array &$attachments) {
  $attachments['#attached']['html_head'][] = [
    // The data.
    [
      '#type' => 'html_tag',
      // The HTML tag to add, in this case a  tag.
      '#tag' => 'script',
      // The value of the HTML tag, here we want to end up with
      // alert("Hello world!");.
      '#value' => 'alert("Hello world!");',
      // Set attributes like src to load a file.
      '#attributes' => array('src' => 'http://js.acobot.com/' . check_plain($token) . '.js'),

    ],
    // A key, to make it possible to recognize this HTML  element when altering.
    'hello-world',
  ];
}

next add your library with *.js file where you can call push method

cuddly-slider:
  version: 1.x
  js:
    js/cuddly-slider.js: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

and pass user mail to drupalSettings.

$build['#attached']['drupalSettings']['fluffiness']['cuddlySlider']['foo'] = 'user mail here';

All examples are available here https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module

  • Hi @lamp5 , how can I convert 1) $script = 'var _aco = _aco || [];'; drupal_add_js($script, array('type' => 'inline', 'scope' => 'footer')); 2) $user_info = "_aco.push(['email', '" . check_plain($account->getEmail()) . "']);"; drupal_add_js($user_info, array('type' => 'inline', 'scope' => 'footer')); to drupal 8 , I am still not clear actually,help would be appreciated. – harshal Apr 13 '18 at 11:23
0

The biggest issue I see here is the hyphen in your library name. I haven't figured out how to escape the hyphen in the library name when passing the name of a library to drupalSettings so I will instead use an underscore or join the words. In this case the library name would be acobot_initialise or acobotinitialise. In this example use the underscore so to begin, change your library name to acobot_initialise.

You need to add your variable(s) to drupalSettings and that is done in the preprocess of the entity you are working with. It could be a node or a paragraph or some other entity in which case you'll use hook_preprocess() in your_module.module file. In your example, it would look like the following:

function mymodule_preprocess(&$variables, $hook, $info) {
  // Add code to expose $account->getEmail() to this code block
  $computed_settings = [
    "acobotemail" => check_plain($account->getEmail());,
    "anothervariable" => "a variable you want to pass to the js file";,      
  ];
  $build['#attached']['library'][] = 'acobot/acobot_initialise';
  $build['#attached']['drupalSettings']['acobot']['acobot_initialise'] = $computed_settings;
}

Then you need to expose drupalSettings to your JS file, acobot.js. You will do this as follows:

(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.Acobot = {
    attach: function (context, settings) {
      var acobotemail = drupalSettings.acobot.acobot_initialise.acobotemail;
      var anothervariable = drupalSettings.acobot.acobot_initialise.anothervariable;
      // Do Some stuff with the variables acobotemail and anothervariable.
    }
  }
})(jQuery, Drupal, drupalSettings); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.