1

i created a custom module, which renderes a custom template.

i followed this tutorial

now basically i want to add, bootstrap, jquery, and some custom stling and scripts,

I read this article,

and i am not able to attach any files to my timplate..

my file structure:

 - product_tree
  - templates  
     - products-tree.html.twig
  - src
     - Controller
         - productTreeController.php
  - js
     - bootstrap.min.js
     - customScripts.js
     - ...

  - css
     - customStyles.css
     - bootstrap.min.css
     - ...

  - product_tree.libraries.yml
  - product_tree.info.yml
  - product_tree.module

this is my libraries file:

# producttree.libraries.yml
product-tree-libraries:
 version: 1.x
  css:
   theme:
    css/customStyles.css: {}
  js:
   js/customScripts.js: {}
  dependencies:
   - core/jquery

this is my hook:

function product_tree_theme($existing, $type, $theme, $path) {
  return array(
    'products_tree' => array(
      'variables' => array('items' => array(), 'title' => '')
    )
  );
}

i tried attaching it through the renfer array

$build =  array(
    'page' => array (
        '#theme' => 'products_tree',
        '#items' => $items,
        '#title' => 'products', 
        '#attached' => array(
            'library' => array(
              'product_tree/product-tree-libraries',
            ),
        ),
    )
);

and in the twig template:

{{ attach_library('product_tree/product-tree-libraries') }}

but still no luck,

in the twig i call the css and scripts

<link href="css/style.css" rel="stylesheet">

i dont know if that is needed, but i tried with and with out, when i include it, i see in the browser inspector that the css file being uploaded, but then "canceled"

enter image description here

can any one tell me what should i do? or what am i doing wrong ?

EDIT: in the controller, I am renderiung the page like this:

$items = array(
    array('name' => 'product one'),
    array('name' => 'product two'),
    array('name' => 'product three'),
    array('name' => 'product four')
);  
$build =  array(
    'page' => array (
        '#theme' => 'products_tree',
        '#items' => $items,
        '#title' => 'products', 
    )
);

$html = \Drupal::service('renderer')->renderRoot($build);
$response = new Response();
$response->setContent($html);

return $response;

i made This according to this answer

because i want it to be separated from drupal. maybe this is the problem?

when i use BareHtmlPageRenderer to render the page (according to this answer). i see drupal imports and the page looks more alive, but still my custom css and js are not there!

4
  • 1
    Indentation looks wrong
    – Kevin
    Oct 23, 2018 at 17:47
  • you mean in the libraries file ? i fixed that, thanks
    – khaled
    Oct 23, 2018 at 17:55
  • No it's still wrong. There should be 2 spaces indentation. You only have 1 space indentation. That's why it's not working.
    – leymannx
    Oct 23, 2018 at 19:38
  • 1
    Spec says number of spaces does not matter in YML, it just needs to be the same number of spaces per block.
    – Hudri
    Oct 23, 2018 at 20:03

2 Answers 2

2

I Found the Solution for this.. and it is by using the BareHtmlPageRenderer (found it here) and then attach the files in the controller php file like this

$build['#attached']['library'][] = 'product_tree/product-tree-libraries';

with out the attachments hook function.

so the controller would look like:

    $build =  array(
        'page' => array (
            '#theme' => 'products_tree',
            '#items' => $term_data,
            '#title' => 'products', 
        )
    );

    $build['#attached']['library'][] = 'product_tree/product-tree-libraries';



    $attachments = \Drupal::service('html_response.attachments_processor');
    $renderer = \Drupal::service('renderer');

    $bareHtmlPageRenderer = new BareHtmlPageRenderer($renderer, $attachments);

    $response = $bareHtmlPageRenderer->renderBarePage($build, 'Page Title', 'markup');
    return $response;

it could also be in the $build array it self i think.. but this way its better when looking at it..

and still no need for:

{{ attach_library('product_tree/product-tree-libraries') }}

Or

<link href="css/style.css" rel="stylesheet">
0
  1. Check the yml indentation:

product-tree-libraries:
  version: 1.x
    css:
      theme:
        css/customStyles.css: {}
    js:
      js/customScripts.js: {}
    dependencies:
      core/jquery

  1. Attach your library with hook_page_attachments To attach to hole page.

    /**
     * Implements hook_page_attachments().
     */
    function product_tree_page_attachments(array &$attachments) {
      //- Note YourModuleName/Library name
      $attachments['#attached']['library'][] = 'product_tree/product-tree-libraries';
    }

  1. No need for:

    {{ attach_library('product_tree/product-tree-libraries') }}

Or

<link href="css/style.css" rel="stylesheet">
1
  • thanks for you answer, but it still doesnt work! i still cant see my js and css files in the browser,, in the js file i have a console log.. but its not loggint any thing! is there something else you think is wrong?? maybe that i am rendering the page as a seperate template.. (i added some code to the question, its the rendering part in the controller) maybe its the problem ?
    – khaled
    Oct 26, 2018 at 14:19

Your Answer

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

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