How to add JavaScript to OpenCart 3 footer?

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

Done!

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