8

I'm creating a theme for D8 called 'herchel'.I'm trying to get this theme to require jquery on all pages (D8 doesn't load Jquery for anonymous users by default)

Looking through the what little documentation i can find on d.o in addition to the core themes, I created a file called herchel.libraries.yml

I've tried the following... all with no luck:

drupal.herchel:
version: VERSION
  dependencies:
    - core/jquery

-

drupal:
version: VERSION
  dependencies:
    - core/jquery

-

herchel:
version: VERSION
  dependencies:
    - core/jquery

Does anyone have any ideas on what I need to put in this?

  • The third one is right, I think the problem is just whitespace - try indenting the line with version to match dependencies – Clive Apr 3 '14 at 21:20
10

I ran in to this upgrading one of my contrib themes to Drupal 8 as I wanted jquery.once for anonymous users. Here is what I did which works great:

In herchel.libraries.yml

herchel-corescripts:
  version: VERSION
  js:
    js/scripts.js: {}
  dependencies:
    - core/jquery
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings
    - core/jquery.once

Then in your theme's herchel.theme file.

function herchel_preprocess_page(&$vars, $hook) {
  // Render the library as laid out in herchel.libraries.yml
  $libraries['#attached']['library'][] = 'herchel/herchel-corescripts';
  \Drupal::service('renderer')->renderRoot($libraries);
}

Pay mind to the indenting as well for the YML code. Though it's not really documented that well yet, you can have a look at this issue and its change log.

Replace hook_library_info() by *.libraries.yml file

Note that you also see a theoretical theme's "scripts.js" file in the code above but you may not need it. In my theme, that's what uses jquery to call custom code.

This code is probably a good reference too for the YML bits. Note that in both cases version is at the same level as dependencies.

I also made a list of Drupal 8 issues I encountered and took part in with my D8 upgrade.

Update:

I've fixed the code, we ran in to this issue: Replace #attached library array values with provider-namespaced strings

Note this:

 $libraries['#attached']['library'][] = array('herchel', 'herchel-corescripts');

vs.this

$libraries['#attached']['library'][] = 'herchel/herchel-corescripts';

I tested and the errors went away. :)

  • Danny, you're awesome! But, I'm getting some PHP errors. Warning: explode() expects parameter 2 to be string, array given in _drupal_add_library() (line 2676 of core\includes\common.inc). Warning: explode() expects parameter 2 to be string, array given in drupal_get_library() (line 2741 of core\includes\common.inc). These errors appear regardless of what's in the herchel.libraries.yml file. I tried working around it a bit with no luck. I also tried your code from Gratis but that appears to be before issue 8507583 was commited – mherchel Apr 4 '14 at 12:41
  • 1
    $page['#attached']['library'][] = 'libraryprovider/libraryname'; – user21641 Apr 4 '14 at 13:02
  • Mike, the new code in Gratis is in the dev version only (drupalcode.org/project/gratis.git/tree/refs/heads/8.x-1.x ) and I tested it and it works with the latest Alpha of D8. I am pretty much heads down on a project today but I may be able to help this weekend. What version of D8 are you using? – Danny Englander Apr 4 '14 at 14:04
  • How can achieve this without using a preprocess function ? – itsdarrylnorris Oct 31 '15 at 6:30
11

In your theme create libraries file herchel.libraries.yml. Into this file put:

libname:
  version: 1.x
  js:
    js/scripts.js: {}
  css:
    theme:
      css/styles.css: {}
  dependencies:
    - core/jquery

In herchel.info.yml put:

libraries:
  - herchel/libname
0

Maybe you have add spaces before "dependencies:"

this is true:

google-maps:
  version: VERSION
  js:
    vendor/gmap3.js: {cope: footer}
    //maps.google.com/maps/api/js?key=000000: { type: external, cope: footer}
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupalSettings

for example this is wrong:

google-maps:
  version: VERSION
  js:
    vendor/gmap3.js: {cope: footer}
    //maps.google.com/maps/api/js?key=000000: { type: external, cope: footer}
    dependencies:
      - core/jquery
      - core/drupal
      - core/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.