How do I place my script after jQuery?

Question

How can I move the following markup after the one loading jQuery and drupalsettings?

<script src="https://abc.ai/js/w?key=abc.jdnwVFfn4YUZA0in"></script>

Actually, the order is the one in the following markup.

<script type="application/json" data-drupal-selector="drupal-settings-json">{"path":{"baseUrl":"\/","scriptPath":null,"pathPrefix":"","currentPath":"node","currentPathIsAdmin":false,"isFront":true,"currentLanguage":"en"},"pluralDelimiter":"\u0003","ajaxTrustedUrl":{"\/search\/node":true},"user":{"uid":0,"permissionsHash":"a791675a6fdb4f639fabce88c7e91295566b58e25f936b9d181582d9321c503f"}}</script>
<script src="/core/assets/vendor/jquery/jquery.min.js?v=3.2.1"></script>
<script src="/core/misc/drupalSettingsLoader.js?v=8.5.1"></script>
<script src="/modules/abc/js/abc.js?v=1.x"></script>

I used hook_page_bottom() to attach the script in the abc module.

function acobot_page_bottom(array &$attachments) {
  $attachments['#attached']['library'][] = 'acobot/acobot-initialise';
  $attachments['acobot'][] = [
    [
      '#type' => 'html_tag',
      '#tag' => 'script',
      '#attributes' => array('src' => 'https://acobot.ai/js/w?key=' . $token),
    ],
    'acobot-token',
  ];
}

The content of the abc.libraries.yml file is the following.

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

I added weight in the below code(instead of #attached in hook_page_bottom) but it does not change the position .

function acobot_library_info_alter(&$libraries, $extension) {
$libraries['acobot'] = array(
  'version' =>'1.x',
  'js' => array(
     'acobot/acobot.js' => array(
        '#weight' => 100,
     ),
   'dependencies' => array(
     0 => 'core/jquery',
     1 => 'core/drupalSettings'
   )  
  ),   
);

  return $libraries;
}

Answer 1

I have an alternative idea: provide the dynamic value in drupal settings, define your main script as library, and get the setting in run time.

 '#attached' => [
  'library'        => [
    'mymodule/mylibrary',
  ],
  'drupalSettings' => [
    'myModule' => [
      'key' => 'value',
    ],
  ],
],

Then in your library script, get the setting and use it.

var data = drupalSettings.myModule.key;

You can see how to create a dynamic script tag if needed here: https://stackoverflow.com/questions/20737442/document-writescript-throws-unexpected-token-illegal

Answer 2

The problem is that you're adding it to page bottom region, which is above the JS.

What exactly is $token, is it something personalized or is it a global license key/identifier for the whole site? If the second, then use a library alter hook to load it instead.

See https://cgit.drupalcode.org/jw_player/tree/jw_player.module#n129 for example, that dynamically alters the library definition to either load from a CDN with a dynamic url or a local path that can vary based on input from the libraries module.

Answer 3

To add Javascript to a theme that depends on jQuery, you should define it as a library and add a dependency to "core/jquery";

See: https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme

Remember, Drupal 8 no longer loads jQuery on all pages by default, so for example if cuddly-slider needs JQuery you must declare a dependency on the core library that contains jQuery (Drupal core provides jQuery, not a module or theme). Declare the dependency with an extension name followed by a slash, followed by the library name, in this case core/jquery. If another other library required cuddly-slider it would declare:fluffiness/cuddly-slider, the theme name, followed by the library name. You cannot declare an individual file as a dependency, only a library.

So, to make jQuery available for cuddly-slider, we update the above to:

# fluffiness.libraries.yml
cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}
  dependencies:
    - core/jquery

So following your example:

abc-initialise:
  version: 1.x
  js:
    js/abc.js: {}
    'https://abc.ai/js/w?key=abc.jdnwVFfn4YUZA0in':
      type: external
  dependencies:
    - core/jquery
    - core/drupalSettings