On Octobercms inject CSS from Partial

Question

I try to inject Javascript and Css from partial using this:

function onStart()
{
    $this->addCss('assets/css/style1.css');
    $this->addCss('assets/css/style2.css');
    $this->addJs('assets/js/javascript1.js');
    $this->addJs('assets/js/javascript2.js');

}

On my layout i'm using {% styes %} and {% scripts %}, however only javascripts are succesfully injected. Css are not injected.

I also used {% put scripts %} and {% put styles %} but only scripts are injected again.

If i use the above code directly on my layout.htm css are injected, but i need this function on my partials. Is this possible?

styles `{% styles %}` is used at top and `{% scripts %}` are added at bottom so for css you need to look in header, as I can able to add css, scripts from partials as well — Hardik Satasiya, Dec 17 '18 at 13:24
Yes i know where to put {%styles%}, i have it on head tag on my layout. If your partial belongs to a cms page you can inject css successfully, i also test it my self and it works. But if you use partial that belongs to layout.htm then you can't inject css. Can you please confirm that you can inject css from partial that belongs to a layout? — Charis, Dec 17 '18 at 14:02
ohh! I see sorry i just overlooked that part let me check that again. — Hardik Satasiya, Dec 17 '18 at 14:06
ok I got your problem, its because your `{% styles %}` must come after `your partial which has css/js inclusion code`, right now what can be heaped to you is `{% styles %}` is `coming first it collect all the information render style tags` then your partial evaluated so, its little late to register that style. — Hardik Satasiya, Dec 17 '18 at 14:13
So, just may be try to arrange that `{% styles %}` tag comes after your partial inclusion so it may have information that your partial is adding style and it can include it. `[ for scripts its in bottom so it is fine with them ]` — Hardik Satasiya, Dec 17 '18 at 14:14
This is correct! I put {% styles %} after partial and now css are injected successfully. Thank you. — Charis, Dec 17 '18 at 14:28

Hardik Satasiya · Accepted Answer · 2018-12-17T14:41:32.410

It seems {% styles %}is respecting hierarchy.

means if you use {% styles %} before your partial it will not inject css for that partial.

so your partial which are coming after {% styles %} , it do not have information of it so it will not inject styles from it.

for example. you are including css/js in code section onStart in your partial then,

This will work

<!-- it will work -->
{% partial 'site/meta' %} <- you are injecting styles in code section
{% styles %} <- its after partial

This will not work

<!-- it will not work -->
{% styles %} <- its before partial
{% partial 'site/meta' %} <- you are injecting styles in code section

So, we can just make sure we include/inject all styles then use {% styles %} so it have all information about css included/injecting. then it can render all the style tags with css.

if any doubt please comment.

On Octobercms inject CSS from Partial

1 Answers1