Using MooTools 1.2 in Joomla

05 Oct 09

MooTools is on version 1.2.3 (after completely dropping 1.1.1 as the default about a year ago), and version 2.0 is expected before years' end. Joomla however, still is including 1.1.1 because of compatibility issues with various plugins. People have been asking how to safely replace the version of MooTools included. Since I've done this several times, I figured I'd share my method here.

My first piece of advice is don't try to replace MooTools for the administrator interface. You're likely to just break all admin functionality. My second bit of advice is that if you rely on MooTools for specific plugins (like video players or enhanced menu systems), then don't do this. Again you're very likely to break things and it can be a real hassle to rewrite other people's plugins to work the way you want them to.

Since I do a lot of custom template work, and my clients usually only have the plugins I setup for them, I found that the best solution for me was to handle this from within my custom templates. This way, I don't need to modify any core files (making this a relatively future-proof technique) and I also have more control as to how it behaves.

  1. First drop your MooTools 1.2 files into a folder within your custom template. I like to use a folder called js for my template javascript.
  2. Make sure that MooTools 1.1.1 is not being included when your template is rendered. Make sure to do this somewhere before <jdoc:include type="head" />

    <?php
//Drop the built in mootools script
unset($this->_scripts[$this->baseurl .'/media/system/js/mootools.js']);
//Drop the built in captions script
unset($this->_scripts[$this->baseurl .'/media/system/js/caption.js']); 
?>
  3. Next, add your MooTools 1.2 files either by listing them in the head as you would with any HTML file, or by using Joomla's addScript() method. I prefer the latter:

    <?php
$this->addScript(JURI::base() . 'templates/' . $this->template
     .  '/js/mootools-1.2.js');
$this->addScript(JURI::base() . 'templates/' . $this->template
     . '/js/mootools-1.2-more.js');
?>

That's it! Now the frontend of your site will not load Joomla's version of MooTools 1.1.1, and instead will load your version of MooTools 1.2. Of course make sure the filenames and paths are correct, and you should be good to go!
5.jpg