Include a JS or CSS file in a TPL

Sugar Dev Team —  November 23, 2012 — 7 Comments

We had the question come up internally, “What is the best way to include an external javascript file in a Smarty template file”. This is very simple to do with the help of the sugar_getscript Smarty function as shown below…

Now the question you may ask here is, why not just include a normal script tag, like this…

The answer here is that the former option will add version bits to the URL, so that on an upgrade to a new version of Sugar, the new version file will be enabled to be used without having to clear the browser cache. And if you have developer mode turned on, the javascript file will never be cached by the browser, making your development cycle much easier without having the clear the browser cache constantly.

Using this method, the top code segment will render like this…

So be sure to use the sugar_getscript Smarty function when looking to include additional javascript files.

For CSS files, there isn’t a shortcut method like this, but you can leverage the Smarty function sugar_getjspath here to get the versioned URI string.

7 responses to Include a JS or CSS file in a TPL


    sugar_getjspathfile is not working.
    It says,
    “unrecognized tag: sugar_getjspathfile”


    Not works for me ..


    Is there a way to change the version bits that are added to the URL using something such as the extension framework or the config_override.php file?

    I am looking for a way that after we make changes to a custom js or css file that the we can change the version info so that places we have used the sugar_getscript function will load the new version info into the version bits of the URL, forcing the new version of the file to be loaded by the browser.


      Hi Brett,

      Could you just delete the cached copy of the script out from under the /cache directory of the Sugar installation? This will force the concatenated script to be rebuilt with your new JS.


        Thank you for your quick reply. I really appreciate your help but I couldn’t get your suggestion to work.

        I tried deleting the cached copy of the file from under the /cache directory but the browser was still loading a cached version of the file.

        For example I have extended the RacerX theme css by adding a css file at custom/themes/RacerX/css/style.css. The css file has the following content:

        ul.clickMenu li ul.subnav li a:hover,
        ul.clickMenu ul.subnav-sub li a:hover {
        color: #176de5;
        background-color: #f3f8fe;

        We added this style rule to make it easier to tell which item in BWC action the mouse is hovering over. The rule will change the background color to a light blue and the text color to a darker blue.

        If I delete the cache/themes/RacerX/css/style.css file, Sugar will rebuild a new style.css file with my changes but the browser is still loading a previous version of the file from its cache because the version bits on the file url have not changed. I am looking for a way to force the browser to reload its cached file without having to have all of my users manually clear their browser’s cache.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s