Adding script conditionally

Question

In the module I am developing I need to add script which require jQuery.The will be added depending on configuration settings. Hence I am using template_preprocess_module(&$variables) where I am trying to add script by doing something like this:

function template_preprocess_module(&$variables) {
  if (TRUE) {
    $variables['jquery'] = ?;
    $variables['script'] = 'path to script in module';
  }
}

Then in the template I will simply be rendering these variable in the head section. But I am facing trouble in adding jQuery, because I don't know its source (obviously I know its source in core but I need something over here which automates path). Can the source be known by using something like drupal_get_path() ? I am also not sure if this is the best way to add script conditionally, any suggestion regarding this? Thanks.

Answer 1

To attach a script in Drupal 8 you need to define a library first in your modules *.libraries.yml (replace * with your modules machine name). The file should look as follows:

libraryname:
  version: 1.x
  js:
    js/script.js: {}
  dependencies:
    - core/jquery

After that you have the possibilities to attach a script through a preprocess function or directly in the template with a twig function. I believe you are trying to achieve the first. In that case you need to modify the render array, like in this example:

<?php
function modulename_element_info_alter(array &$types) {
  if (isset($types['table'])) {
    $types['table']['#attached']['library'][] = 'modulename/libraryname';
  }
}
?>

If you want to append a script to every page depending if a custom setting is activated in your module, you should do as follows:

function modulename_page_attachments_alter(array &$page) {
  if ($settingIsTrue) {
    $page['#attached']['library'][] = 'modulename/libraryname';
  }
}

You can read more about it in the manual.

Answer 2

You can add jQuery directly in a twig template using the new Drupal 8 attach_library() twig function:

{# my_template.html.twig #}
<div>
{# This will add jQuery to this template only #}
{{ attach_library('core/jquery') }}
</div>