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.
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 %}