How to add JavaScript to OpenCart 3 footer?

2 мин. на чтение

If you just need ready solution without deep dive into OpenCart backend structure please skip 1st part and follow this.

This article is a logical extend from previous one about a similar task in OpenCart 2. Since new OC version start using twig templates instead of tpl, I decided to write another article.

So, as you already know from previous topic — OpenCart has a library called Document which is possible to use for .css stylesheets and .js scripts in your website.

In OpenCart 3 we are still have 2 methods that we could be used for our purpose:

public function addScript($href, $postion = 'header') {
		$this->scripts[$postion][$href] = $href;

This method receive two parameters: 1) url of script and 2) postion (position actually, but … it’s a open source software so deal with it).

By default $postion equal header. But you can use anyone to collect .js links for other sections of your website: middleware, afterHeader, article, aside and of course footer. So you can type something like this one your controller:

$this->document->addScript('/path/to/your/script.js', 'footer');

Second method that we need is getScripts();

public function getScripts($postion = 'header') {
		if (isset($this->scripts[$postion])) {
			return $this->scripts[$postion];
		} else {
			return array();

And again parameter postion is equal header by default but we can specify it by yourself.

$data['footer_scripts'] = $this->document->getScripts('footer');

OpenCart 3 already have required code but we try to learn something new, that’s  why so detailed.

Last one you need to do — add some code to template file like this one:

{% for script in footer_scripts %}
<script src="{{ script }}" type="text/javascript"></script>
{% endfor %}

Go ahead and try to write this to your footer :) 2nd part is not necessary to read if you are it-savvy developer.

How to add javascript to footer step-by-step for noob

Previous part of this article focused on developers but if you are new in php development this part is for you. Here is step by step how to add script to footer of your OpenCart 3 website.

  1. Upload your .js script to server. Usually js files store in catalog/view/javascript but you can choose any path. Our sample script name will be myscript.js so full path for it is catalog/view/javascript/myscript.js
  2. Open catalog/controller/common/footer.php and add before
    $data['scripts'] = $this->document->getScripts('footer');

    this code

    $this->Document->addScript('/catalog/view/javascript/myscript.js', 'footer');
  3. In footer twig file of default template required code already exist. But of course you are using your custom theme so please check catalog/view/theme/your_theme/template/common/footer.tpl for this code:
    {% for script in scripts %}
    <script src="{{ script }}" type="text/javascript"></script>
    {% endfor %}


If you are having trouble please ask for a help in comments below.

Ihor Chyshkala

Full Stack Software Engineer PHP ♥️JS
IT Pro blogger

Rate author
Ihor Chyshkala author's blog
Add a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Vadym Ilchenko

    Thanks, but in my case, there was an error with the capital D in word “Document” here – $this->Document->addScript

  2. ali samie

    Hello. thanks for Tutorial.
    but there is an extra slash ‘/’ in this part:
    under header: How to add javascript to footer step-by-step for noob
    in part 2: this [ $this->Document->addScript(‘/catalog/view/javascript/myscript.js’, ‘footer’); ]
    needs to be changed to
    [ $this->Document->addScript(‘catalog/view/javascript/myscript.js’, ‘footer’); ]

  3. Ali

    I am trying to use defer for my public function addScript($href, $postion = ‘header’) {
    But couldn’t see option for it.
    Can you help with that?