Moving Javascripts to Footer Twig Template

Question

I'm creating a theme for OpenCart 3 and I want to move the javascripts embedded in individual twig templates to the footer.

I'm coming from the Laravel world where I can simply use @stack('scripts') & then using @push('scripts').

Is there a similar function in Twig that will allow me to do the same?

OpenCart doesn't use blocks so I'm finding this difficult to figure out.

Templates that extend others can't have a body, and all existing templates have a body that can't be defined as a block in the footer template. Only the javascript needs to be moved to the footer.

Perhaps I need to extend Twig in some fashion to allow for adding this stack/push functionality available in blade templating.

Would this be a better solution?

--EDIT

Here is an example. This is the default slideshow.twig that's rendered via the slideshow.php module.

<div class="swiper-viewport">
  <div id="slideshow{{ module }}" class="swiper-container">
    <div class="swiper-wrapper"> {% for banner in banners %}
      <div class="swiper-slide text-center">{% if banner.link %}<a href="{{ banner.link }}"><img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" /></a>{% else %}<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" />{% endif %}</div>
      {% endfor %} </div>
  </div>
  <div class="swiper-pagination slideshow{{ module }}"></div>
  <div class="swiper-pager">
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>
<script type="text/javascript"><!--
$('#slideshow{{ module }}').swiper({
    mode: 'horizontal',
    slidesPerView: 1,
    pagination: '.slideshow{{ module }}',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 30,
    autoplay: 2500,
    autoplayDisableOnInteraction: true,
    loop: true
});
--></script>

I want to have this javascript section here render at the bottom of the page where it belongs, not in the template file, wherever it sits on the page. -- END EDIT

This is prevalent throughout all of OpenCart and needs to be changed, but that's a conversation for another day. Using Twig I assumed there would be the functionality to accomplish a stack/push technique but it doesn't seem to exist as such.

I'm sure there must be some way to accomplish this, but I'm not seeing it in the docs anywhere.

Take a look at https://twig.symfony.com/doc/2.x/tags/extends.html — Matias Kinnunen, Jan 21 '18 at 08:06
Do you want to add extra javascript files from inside included files? — DarkBee, Jan 21 '18 at 12:36
Yes, but my question still stands. The javascript u want to add, where is it located? Watch [here](https://twigfiddle.com/tyri50https://twigfiddle.com/tyri50). Would it be in `child.twig` or `hello.twig`? If it's the latter, then u can't do it by default in `twig`. Watch this [answer](https://stackoverflow.com/a/42712220/446594) on how to achieve this effect — DarkBee, Jan 21 '18 at 13:36
As I said, OpenCart doesn't use blocks, or inheritance at all really. It wouldn't be in either file. OC has no child or parent templates, each template is rendered individually via it's own controller, then set as a variable for the template to render. I will look at that answer though. — secondman, Jan 21 '18 at 14:08
@VinceKronlein nothings stops u from modifying the templates of your theme though? — DarkBee, Jan 22 '18 at 08:46
@DarkBee, true, but not all templates are changed. Some are just copied over since they have no architectural changes. In my opinion Twig is just not flexible enough to accomplish what's needed here without massive amounts of work. I think I'll use one of the many freestanding Blade implementations and create my theme in Blade. — secondman, Jan 22 '18 at 12:17

score 1 · Answer 1 · answered Jan 21 '18 at 07:55

1

You need to use blocks in twig

Add this code to the main file where you want to add the script in runtime

{% block footer %}        
{% endblock %}

Add this code to the file where you want to write script code

{% block footer %}
 <script>
  ...
 </script>
{% endblock %}

answered Jan 21 '18 at 07:55

Gurmeet Singh

774
8
21

OpenCart doesn't use blocks so I'm finding this difficult to figure out. Templates that extend others can't have a body, and all existing templates have a body that can't be defined as a block in the footer template. Only the javascript needs to be moved to the footer. – secondman Jan 21 '18 at 09:21

Moving Javascripts to Footer Twig Template

1 Answers1