2

I'm trying to add external JavaScript to my Drupal 8 theme. Can someone tell me what I'm doing wrong here? This function is in my MYTHEME.theme file:

      function MYTHEME_preprocess_page(&$variables) {
      $vars['ext_js'] = array(
        '#attached' => array(
          'data' => 'http://cdn.somelibrary.com/library/2.3.1/js/jslibrary.min.js', 
          'options' => array(
            'preprocess' => TRUE,
            'every_page' => TRUE, 
            'group' => 'NONE',
            ),
        ),
      );
}

Then in the theme I'm rendering it with:

{{ ext_js }}
3

Try adding 'type' => 'external', to the options array index.
By default, the type is considered to be a reference to a file hosted on your Drupal site; by using 'type' => 'external', you are specifying that data is a reference to a file hosted on a different host.

  • 1
    @Bala actually, 'type' => 'external' may be all that is required to resolve the issue. The default 'type' is 'file' for more info see _drupal_add_js > 'type' – David Thomas Jan 25 '14 at 8:14
  • I agree this is enough, may be you can add the following to avoid for VLQ, actually someone triggered it for VLQ, [Add external JavaScript ('external'): Allows the inclusion of external JavaScript files that are not hosted on the local server. Note that these external JavaScript references do not get aggregated when preprocessing is on.] – Bala Jan 25 '14 at 11:26
  • 1
    I wrote the initial answer from my mobile, perhaps was a little concise. Will endeavour to elaborate next time! – David Thomas Jan 25 '14 at 21:28
  • @Bala I am sorry I do not understand your comment. – Compustretch Jan 27 '14 at 3:38
  • @Compustretch before this answer was in very low quality review queue, now this answer is good enough. try as david suggested to solve your issue. ignore my comments, its only about vlq. – Bala Jan 27 '14 at 4:25
2

The simplest way I find is to just so something like this in your theme .libraries.yml:

name_of_library:
  js:
    base:
      'https://path.com/to/js.js': { external: true }

Then call it using your .info or .theme file.

1

This is no Drupal 7, some things have changed, the easiest way to add an external library tested on my local is the following:

locate your MYTHEME.libraries.yml

here you are declaring the new library, change the values for yours.

add the following lines to the file:

bootstrap:
  version: 1.0
  header: true
    js:
      https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js: {}

Spacing is really important.

Then simply call the library from you twig template file: example:

{{ attach_library('MYTHEME/bootstrap') }}

don't forget to cache:rebuild

0

Refer to Inline JavaScript mentioned in Drupal Community Documentation about how to Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme, you can put it in either a custom block or even directly in a Twig template.

Take a look on this documentation on how to locate the current twig filename, say your twig file is.: [DRUPAL8_ROOT_FOLDER]/themes/[THEME_NAME]/templates/html.html.twig
then modify the html as below:

<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token|raw }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token|raw }}">
    <js-placeholder token="{{ placeholder_token|raw }}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="HandheldFriendly" content="true" />
    <meta name="apple-touch-fullscreen" content="YES" />
    <script scr="PUT-YOUR-EXTERNAL-SCRIPT_URL-HERE"></script>
  </head>
  <body{{ attributes }}>
    <a href="#main-content" class="visually-hidden focusable">
      {{ 'Skip to main content'|t }}
    </a>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token|raw }}">
  </body>
</html>

I've put an external script for sharing button on the twig file in my theme. Then Install Drush to rebuild the cache using drush cache-rebuild. Seems it works. You may check it on my drupal site.

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.