-4

In a Drupal 10 site I have a page (content type: Basic page) that needs a small Javascript fragment defined in a Javascript file that was added as an asset to the theme.libraries.yml file. I don't want to provide the Javascript through the theme.info.yml file because it would be included in every page served by the site.

Instead, I would like to include it only in that specific page. Various sources of information suggest implementing the hook hook_page_attachments_alter. From what I can see, this hook is called with every request. How can I check inside the hook if the request is for the page that needs the Javascript fragment? I do not want to use the URL or the node id. Instead I would like to use the title field of the node.

Thank you.

6
  • 1
    What is the JS for? Is it for a specific block? A content type? A view? Generally it's better to attach a library to a component, rather than a whole page, so more context on what the JS applies to would make it easier to provide a quality solution. Commented Jun 11, 2024 at 21:37
  • @Jaypan As specified It's for a Basic Page. I will clarify more what exactly I need. I have a Basic Page with a body and some expert users write the body by writing the HTML source code. One of these pages needs a Javascript fragment. I could create a template for that single page that includes the javascript, but that template is based on the node id.In this way the template is associated only with that single node. If I remove the contents and recreate it, the association is lost. Because of this, I would like to associate the js by using the title of the content type. Commented Jun 12, 2024 at 7:23
  • 1
    Have you tried the "Asset Injector" module or the "Twig field" module? Commented Jun 12, 2024 at 11:35
  • @Hudri - Why do you write a comment instead of an answer? Commented Jun 12, 2024 at 13:07
  • The Asset Injector module is actually probably a good solution for you. Commented Jun 12, 2024 at 13:40

1 Answer 1

0

The complete solution here:

  1. My theme is called themex.

  2. Inside the file themex.libraries.yml define an asset library containing the Javascript code that you want to include in your specific page.

  3. In the file themex.theme implement the hook hook_page_attachments_alter as defined below. The hook checks if the requested page (or node) has some specific attributes and when the condition is true it associates the asset library trickyjs with the requested page.

     /* Implements hook_page_attachments_alter() */
    
     1 function themex_page_attachments_alter(&$page)
     2 {
     3    $rm = \Drupal::routeMatch();
     4    $node = $rm->getParameter('node');
     5    
     6    if( $node instanceof \Drupal\node\NodeInterface )
     7    {
     8        if( $node->getTitle() == "policy" )
     9        {
    10            $page['#attached']['library'][] = 'themex/trickyjs';
    11        }
    12    }
    13 }
    
  4. The lines 3, 4 and 6 are necessary to check if the requested URL is for a Node. The code in the line 8 checks if the page meets the special condition and the code in the line 10 associates the asset library with your page.

  5. In the output of your page you will find a <script> tag including your library.

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.