MyCommonIncludable

BlogPost

PrestaShop - how to add additional JScript / CSS files to a theme

My first thought on this was to hack the "header.tpl" file and add the new files that way.
That route may indeed work but there is a smarter way to do it.
I believe the benefit of doing things the "smart" way is that it will get your new files cached on the server thereby speeding up load times.

Anyway, PrestaShop 1.4 and up has an "overrides" directory containing the subdirectories "classes" and "controllers".

First of all you need to work out where you want to add in your new files. For example if you only want to add your scripts on the Category pages you'll need to find a file called CategoryController.php and save it (using the same name) into overrides/controllers.

If you want to add a script that applies to every page, I believe FrontController.php is the one you are looking for, although (confusingly) this goes into overrides/classes.

What you need to do with each of those files is extend the original CORE classes like this:


Code:

class FrontController extends FrontControllerCore { 
public function setMedia() { 
parent::setMedia(); Tools::addJS(_THEME_JS_DIR_.'myhacks.js'); 
} 
}


or like this


Code:<?php class CategoryController extends CategoryControllerCore { public function setMedia() { parent::setMedia(); Tools::addJS(_THEME_JS_DIR_.'myhacks_category.js'); } }NOTE: Do NOT close the php opening tag. I believe PrestaShop automatically does something to trim out any white space that could cause problems and closes the tag automatically. This is something the Drupal does too.

Comments