We have moved our forum to GitHub Discussions. For questions about Phalcon v3/v4/v5 you can visit here and for Phalcon v6 here.
  1. Home
  2. Volt

Inline js to footer and css to header

Hi community,

i have inline javascript in a view which should be loaded in the footer for performance reasons. Same with css-style which should come to the header. How can this be implemented? Should I use blocks? I load the views by the {{ content() }} call and I currently do not use blocks views.

My first try is to define a block in the main index.volt and in the views I do the following:

<body>
{%block js_footer %}
alert("This code should be in the footer not in the middle of the content!");
{%endblock %}

<h1>Html HTML HTML HTML</h1>

The Output:

<body>
<h1>Html HTML HTML HTML</h1>
<script type="text/javascript>
alert("This code should be in the footer not in the middle of the content!");
</script>

But I get the error "Embedding blocks into other blocks is not supported"

greetings Eike

2


12.1k

Sorry, I didn't see the possibility to add self defined functions/extensions to volt. I will now write an extension like {js_header}alert("I want to the footer"){/js_header}



9.1k

Eike, how will you render the code inside js_header at the very to of the page? (assuming you write the code in the middle but want it to show at the top). I am in a similar situation.



12.1k
edited Oct '14

Hi aleemb,

I have in the index.volt

{{ assets.outputJs('footer') }}
</body>
</html>

So in the self defined function I do the same as I actually do in the controllers:

$this->assets->collection("footer")->addJs("js/bootstrap/bootstrap.js")

Update1: I think I will put the rendered code in an extra file which I add to a js-collection. The code has to be rendered because I may want to assign variables from the controller to the js. Update2: Assets is the Phalcon-AssetsManager registered as a service in the DI:

$di->set('assets', function () {
    return new Phalcon\Assets\Manager();
}, true);

Update3: Another solution could be to collect the content of all the {% js_header %} in an array and loop through it before rendering the view like I do with metatags https://forum.phalcon.io/discussion/1135/-solved-dynamically-add-variables-to-loop



5.0k

Hi, Interesting thread. About rendering code into a file ... I think you'd be better off outputing all of the configuration parameters from the DB into a Javascript variable inside the HTML document like so :

<script type="text/javascript"> var php_var = "<?php echo $php_var; ?>"; </script>

Edit: obviously that's just plain PHP :D



12.1k

Hi @benvafre,

I think u have missunderstood me. I already have my PHP-Values assigned to the template but due to performance reasons I want to put this javascript including the assignment to the footer (or to the header if nessessary). Thanks anyway! ;)



5.0k

@Eike This is not me missunderstanding, this is me showing you a best practice for reading dynamic values from a database in javascript. You place the script in the footer, and it reads values from the variable you output in the body.



5.0k

@Eike On another note, if you use caching appropriately, you are worse of conditionnaly loading JS scripts, you should minify everything into one file, hence the variables that let you decide what to do based on the page.



12.1k

Ah okay! I think got your approach! I will try that and give feedback