[SOLVED] Plone 3 : Overriding the default Javascript files

Plone 3 : Overriding the default Javascript files

I am using Plone 3 and currently trying to override one of the default javascript files i.e. table_sorter.js.

Under the browser directory of my product, I created a directory "javascripts" (just to keep things organized), then registered the directory as a ressource, in configure.zcml:

<browser:resourceDirectory
    name="myproduct.javascripts" 
    directory="javascripts" 
    layer=".interfaces.IThemeSpecific" />

Where "myproduct" is self explanatory. Then in jssregistry.xml, I registered and ordered the javascript files:

<javascript id="++resource++myproduct.javascripts/table_sorter.js" 
    enabled="True" 
    cookable="False" 
    inline="False" 
    insert-after="jquery.js" />

Where table_sorter.js is the name of the javascript file that I need to override.

The reason I need to override the file is because the default has no way of telling the user whether a table is sortable or not until it is clicked on. I need to include icons on the table header by default.

I have followed the above steps but it does not seem to work. I have no idea where I'm going wrong. Any help will be highly appreciated.

Solution

You are missing the generic setup import step. Add a file skins.xml to your gs profile with this code:

<?xml version="1.0"?>
<object name="portal_skins" allow_any="False" cookie_persistence="False">

    <object name="plonetheme_mytheme_js"
        meta_type="Filesystem Directory View"
        directory="your.product:skins/plonetheme_mytheme_js"/>

    <skin-path name="*">
        <layer name="plonetheme_mytheme_js"
            insert-after="custom"/>
    </skin-path>

</object>

After that, rembember to reinstall your product in order to apply your new gs step

Note: I'm giving another answer simply because code in comments isn't readable. Look at the @Martijn Pierters 's answer (and comments) for the initial part.