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 }}
Improve this question

4 Answers 4

Reset to default
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.

Improve this answer
7
  • 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, 2014 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, 2014 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, 2014 at 21:28
  • @Bala I am sorry I do not understand your comment.
    – Compustretch
    Jan 27, 2014 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, 2014 at 4:25
3

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.

Improve this answer
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

Improve this answer
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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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