Include assets in volt template

Question

Include assets in volt template

Luka Jeremic Dec '17

Created Dec '17	Last Reply Dec '17	Replies 3	Views 938	Votes 1

Luka Jeremic 1.1k

Dec '17

How can I include assets in volt template without using controller. For example, when I include assets in controller I would write something like this:

controller.php

<?php
$footerAssets = $this->assets->collection('footer');
$footerAssets->addJs('some_path');
$footerAssets->addInlineJs('some_js_code');

Calling this js assets in volt:

<footer>
{% if assets.exists('footer') %}
       {{ assets.outputJs('footer') }}
       {{ assets.outputInlineJs('footer') }}
{% endif %}
</footer>

How can I get same results without using controller, only volt?

1

Lajos Bencz
77.7k

Accepted
answer

edited Dec '17
Dec '17

{% set footerAssets = assets.collection('footer').addJs('some_path').addInlineJs('some_js_code') %}

<div>
foobar
</div>

<footer>
{% if assets.exists('footer') %}
       {{ assets.outputJs('footer') }}
       {{ assets.outputInlineJs('footer') }}
{% endif %}
</footer>

Dylan Anderson · Answer 1 · 2017-12-04T13:47:51-07:00

I'm unclear why you would need to use the asset loader from Volt. Why not just output the javascript/CSS tags directly?

Luka Jeremic · Answer 2 · 2017-12-05T01:52:28-07:00

{% set footerAssets = assets.collection('footer').addJs('some_path').addInlineJs('some_js_code') %}

<div>
foobar
</div>

<footer>
{% if assets.exists('footer') %}
      {{ assets.outputJs('footer') }}
      {{ assets.outputInlineJs('footer') }}
{% endif %}
</footer>

First of all ty very much this actually works, but problem I have with this solution is that I would have to write my code basically in string all the time :)

Can you provide me with the solution where I can write my code directly in javascript and append my content to footer block?

Luka Jeremic · Answer 3 · 2017-12-05T02:07:38-07:00

I'm unclear why you would need to use the asset loader from Volt. Why not just output the javascript/CSS tags directly?

Because I have view hierarchy and my code simply added to my let's say user view will be included above my included files who are necessary for this code to work. So my main goal is to achieve targeting code on certain positions in HTML. This feature has blade templating system in Laravel. I think you name your sections let's's say

@section('footer')

some code it doesn't have to be javascript

@endsection

and then you call it in index.volt (whatever) simply as yield('footer'). You can check it here link. Reusing and targeting my code in certain positions in HTML would be a great thing to have

Luka Jeremic · Answer 4 · 2017-12-05T04:21:42-07:00

Guys, I'm so sorry I've figured this out. When I was trying to extend my view I didn't realize that you can't have any code without initializing some kind of block and then moving your code to a block.

Anyhow this was my solution:

index.volt has a block:


<body class="fixed-left">

{% block main_content %}        

       {{ content() }}

{% endblock %}

{% block footer %}

{% endblock %}

</body>

And my other view extends index.volt and adds javascript code like this


{% extends 'index.volt' %}

{% block main_content %}

     Some main content

{% endblock %}

{% block footer %}

Some footer content

<script> content </script>
{% endblock %}

Ty, guys for spending time trying to help me, ty Layos for your solution on including assets from your volt template my mistake was not describing my problem clear enough, I will accept your solution because it is the answer to my initial question...

Cosimo · Answer 5 · 2017-12-05T09:18:44-07:00

That's how I include mine assets. I have a multisite app with common assets and also custom for every website. I merge them with the ini files. Every asset file contain Css and Js for header, footer and single controllers. That's an inclusion example for the header:

  <!-- Non toccare questa parte -->
  <!-- Javascripts di sistema header-->
  {{ assets.outputJs('headerJs') }}
  <!-- carica i css di sistema nell'header-->
  {{ assets.outputCss('headerCss') }}
  <!-- carica i css specifici per una parte del sito -->
  {% if assets.collection( router.getControllerName()~'Css' ).count() %} {{ assets.outputCss( router.getControllerName()~'Css' ) }} {% endif %}
  <!-- fine parte protetta -->