Override the scripts.js of a Joomla template

Question

Im working in Joomla! 3.4.8.

...so, how do I override the templates/my_template/scripts.js?

...

UPDATE. I'm talking about a frontend template, site template.

I bought a template in Themeforest. The template has a file in templates/my_template/js/scripts.js.

The problem is obvious. If in the future I update the template, all my changes will be lost. :(

Answer 1

Edited

How you're going to achieve this is going to depend on the script object's scope.

Search in the scripts file for the function executed when the window is loaded. It should begin with either:

window.onload = function...

or

window.addEventListener("load"...

The contents of this function will depend entirely on how the template devs coded the script, so I can only give you rough guidelines from here.

You need to find out the name of the script's main container object. It's probably called something like 'themeForest'. You're looking out for something like:

var themeForest = new ThemeForest

or (as is likely, it's been built using a JS package manager) maybe something like:

var themeForest = __webpack_require__(391);

Exact implementation will differ.

Now, you want that object to be available in global scope. So, using the above examples, they'd look like this:

var themeForest = window.themeForest = new ThemeForest

or

var themeForest = window.themeForest = __webpack_require__(391);   

The important bit is making sure that the script is made into a property of the window object. If window.themeForest is there already then great, it's already available in global scope. If not add it like I've done above.

Now you should be able to override any individual methods, functions and variables by reassigning them in your override script. Let's say there's a method called init() that you want to override. In your script add:

window.themeForest.init = function() {
    // Function contents
}

Make sure your script is loaded in your template after the template's scripts.js file.

All other themeForest properties will stay as they were, but the init property will now be your function.

You might also want to add this at the top of your script to make redeclaring things a little quicker:

window.themeForest = themeForest

Now the override example I gave above would look like this:

themeForest.init = function() {
    // Function contents
}

Hope that helps - I can't really give a more specific answer without knowing exactly how the template's script works I'm afraid.

Answer 2

It depends on how this js is included in head. And based on path I think it's straight JDocument->addScript which doesn't implement override logic.

Based on that, in the given situation I'd suggest you to create system plugin that will catch onBeforeCompileHead() and unset this scripts.js from scripts array, and simply add one that you need [your override].

Answer 3

The idea by @Alexandr about creating a plugin to unset scripts is a good one - of course it depends on how the template developers do the call.

Another simple way I sometimes do, is to modify slightly the index.php of the template and then load any js or css files I want, the way I want.

Just find the calls to js files and comment them out - then include yours.

Usually it's just a few lines of modification which can be easily maintained on a future update.