Skip to main content

If the code posted above is correct, the indentation is off. It should look something like this:

search:
  version: VERSION
  js:
    extras/js/drupal/search/sort.js: {}
    extras/js/drupal/search/filter.js: {}

See how js is not indented under version?

The second part of it is you have to tell Drupal to load it either sitewide, or on demand:

Sitewide, you need to declare this in your theme info yaml:

libraries:
  - mytheme/search

If you want to do it on demand, something like:

/**
 * Implements hook_page_attachments_alter().
 */
function mytheme_page_attachments_alter(array &$attachments) {
  $current_path = \Drupal::service('path.current')->getPath();

  // We really want to minimize the loading of these two libraries
  // for anonymous users. so far, we only need it on any /search* path.
  if (preg_match('/\/search+/', $current_path)) {
    $attachments['#attached']['library'][] = 'core/drupal';
    $attachments['#attached']['library'][] = 'core/jquery';
    $attachments['#attached']['library'][] = 'mytheme/search';
  }
}

Or you can put it in a specific twig template i.e. node.html.twig like this

{{ attach_library('mytheme/search') }}

If the code posted above is correct, the indentation is off. It should look something like this:

search:
  version: VERSION
  js:
    extras/js/drupal/search/sort.js: {}
    extras/js/drupal/search/filter.js: {}

See how js is not indented under version?

The second part of it is you have to tell Drupal to load it either sitewide, or on demand:

Sitewide, you need to declare this in your theme info yaml:

libraries:
  - mytheme/search

If you want to do it on demand, something like:

/**
 * Implements hook_page_attachments_alter().
 */
function mytheme_page_attachments_alter(array &$attachments) {
  $current_path = \Drupal::service('path.current')->getPath();

  // We really want to minimize the loading of these two libraries
  // for anonymous users. so far, we only need it on any /search* path.
  if (preg_match('/\/search+/', $current_path)) {
    $attachments['#attached']['library'][] = 'core/drupal';
    $attachments['#attached']['library'][] = 'core/jquery';
    $attachments['#attached']['library'][] = 'mytheme/search';
  }
}

If the code posted above is correct, the indentation is off. It should look something like this:

search:
  version: VERSION
  js:
    extras/js/drupal/search/sort.js: {}
    extras/js/drupal/search/filter.js: {}

See how js is not indented under version?

The second part of it is you have to tell Drupal to load it either sitewide, or on demand:

Sitewide, you need to declare this in your theme info yaml:

libraries:
  - mytheme/search

If you want to do it on demand, something like:

/**
 * Implements hook_page_attachments_alter().
 */
function mytheme_page_attachments_alter(array &$attachments) {
  $current_path = \Drupal::service('path.current')->getPath();

  // We really want to minimize the loading of these two libraries
  // for anonymous users. so far, we only need it on any /search* path.
  if (preg_match('/\/search+/', $current_path)) {
    $attachments['#attached']['library'][] = 'core/drupal';
    $attachments['#attached']['library'][] = 'core/jquery';
    $attachments['#attached']['library'][] = 'mytheme/search';
  }
}

Or you can put it in a specific twig template i.e. node.html.twig like this

{{ attach_library('mytheme/search') }}
Source Link
Kevin
  • 28k
  • 12
  • 95
  • 196

If the code posted above is correct, the indentation is off. It should look something like this:

search:
  version: VERSION
  js:
    extras/js/drupal/search/sort.js: {}
    extras/js/drupal/search/filter.js: {}

See how js is not indented under version?

The second part of it is you have to tell Drupal to load it either sitewide, or on demand:

Sitewide, you need to declare this in your theme info yaml:

libraries:
  - mytheme/search

If you want to do it on demand, something like:

/**
 * Implements hook_page_attachments_alter().
 */
function mytheme_page_attachments_alter(array &$attachments) {
  $current_path = \Drupal::service('path.current')->getPath();

  // We really want to minimize the loading of these two libraries
  // for anonymous users. so far, we only need it on any /search* path.
  if (preg_match('/\/search+/', $current_path)) {
    $attachments['#attached']['library'][] = 'core/drupal';
    $attachments['#attached']['library'][] = 'core/jquery';
    $attachments['#attached']['library'][] = 'mytheme/search';
  }
}