Drupal

Add JS to Drupal 8 website

For the last two months I’ve been working on my first Drupal 8 website. Its quite a huge leap from version 7 but the new features and methodology of working with a Drupal CMS is way better.

One bit I struggled with was inserting a custom Javascript file that made use of jQuery functions. This is how I managed to do it (I assume you know how to develop a Drupal 8 theme and how to develop with Drupal 8 in general):

In the theme_name.libraries.yml file, define you library and add the js file i.e.

custom-js:
 js:
  js/main.js: { every_page: true }
   dependencies:
    - core/jquery
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings
    - core/jquery.once

Save the file. Next, edit the theme_name.info.yml to add the library i.e.

libraries:
 - 'theme_name/custom-js'

Save the file. Open your custom Javascript file e.g. main.js and add you code in the following format. The code demo below ensures Drupal’s no-conflict policy for Javascript libraries. We want to ensure that the different libraries you use function independently. This example caters for jQuery:

jQuery(document).ready(function($){

    // insert your code here

});

Save your file and you should be good to go.

Drupal

Create Drupal 8 Custom Page Template

Simply place the following code in the .theme (theme_name.theme) file that is located inside your theme folder. Replace theme_name with the actual name of your Drupal theme.

function theme_name_theme_suggestions_page_alter(array &$suggestions, array $variables) {
// Add content type suggestions.
if ($node = \Drupal::request()->attributes->get('node')) {
array_splice($suggestions, 1, 0, 'page__' . $node->getType());
}
}

Then create a file under the template folder and name it according to your node content type e.g.

page--page.html.twig

Then add your custom code for that particular page.