Topics

script block

The {script} block allows you to easily embed javascript code within the template and allow it to be placed in the appropriate location on the page and also minimized if that feature is turned on.  It is also used to load script files and framework library modules.  In a basic sense the {script} block operates like the {css} block where it can be passed a 'src' parameter with the path to a script file.  It requires a 'unique' identifer parameter and can aid the loading of YUI, jQuery, or Twitter Bootstrap modules by passing 'yui3mods', 'jquery', or 'bootstrap' set with a '1' or with a comma-separated list of modules.  Otherwise, you can place javascript code within the block, HOWEVER we recommend you enclose it in {literal} tags to prevent confusion when using open/close brackets, etc...

Here's a killer YUI we use to build tabs on a page.

{script unique="`$tabs`" yui3mods="1"}
{literal}
    EXPONENT.YUI3_CONFIG.modules.exptabs = {
        fullpath: EXPONENT.JS_RELATIVE+'exp-tabs.js',
        requires: ['history','tabview','event-custom']
    };

	YUI(EXPONENT.YUI3_CONFIG).use('exptabs', function(Y) {
        Y.expTabs({srcNode: '#{/literal}{$tabs}{literal}'});
		Y.one('#{/literal}{$tabs}{literal}').removeClass('hide');
		Y.one('.loadingdiv').remove();
	});
{/literal}
{/script}

The script and literal are used together.  Literal simply tells the smarty compiler to ignore what comes between the tags.  We want javascript to pass straight through without being interpreted by smarty because it will throw an error.   The script tag does a number of things.  First, it removes the code you put inside it and places it in the foot of your document.  This is important to keep clutter out, and is great for SEO.  Second, it is especially useful for YUI modules.  SCRIPT uses the YUI loader and will pull any of the YUI javascript files into your document through the loader.  All you have to do is designate the module in "yuimodule" (you can place a number of modules here if you need to).  If you are using a non-YUI script, add an "src" parameter to the script tag, and the YUI loader will still run, load the external javasript, and write your inline javascript to the footer of your document.

Here's a jQuery script

{script unique="flyout" jquery=1}
{literal}
$(document).ready(function(){
	$(".triggerlogin").click(function(){
		$(".panel").toggle("fast");
		$(this).toggleClass("active");
		return false;
	});
});
{/literal}
{/script}

And a Twitter Bootstrap script

{script unique="alert" jquery=1 bootstrap="alert"}
{literal}
    $(".alert").alert()
{/literal}
{/script}

A quick note.  YUI v2.9.0 and v3.x live in the "external" folder.  Take a quick look through these files, then run over to the official YUI website for extensive documentation on this powerful javascript library.   

{script} with non-YUI javascript

you can still use the "script" plugin, as we said above, without using YUI modules. You can load an external file with the "src" attribute, then place the constructor between the "literal" tags.  As stated above, these snippets of javascript will automatically be moved to the foot of your document by Exponent.  The basic syntax is as follows:

//this is some scripts
//that use the YUI library DOM and animation
//but we also have our own external js to go with them
//so we have already done the above example
//to get the dom and animation yuimodles

{script unique="yuidomcollapse`$config.uniqueid`" src="`$smarty.const.URL_BASE`/framework/modules/common/js/yuidomcollapse/yuidomcollapse.js"}
	{literal} 
        // backticks are necessary on the $smarty.const.URL_BASE
        // have to have at least one line between the {script}{/script} tags, else the plugin assumes it is empty.  even if it is commented out //
	{/literal}
{/script}

{script unique="yuidomcollapse-css`$config.uniqueid`" src="`$smarty.const.URL_BASE`/framework/modules/common/js/yuidomcollapse/yuidomcollapse-css.js"}
	{literal} 
        // backticks are necessary on the $smarty.const.URL_BASE
        // have to have at least one line between the {script}{/script} tags, else the plugin assumes it is empty.  even if it is commented out //
	{/literal}
{/script}

{script unique="yuidomcollapse-fancy`$config.uniqueid`" src="`$smarty.const.URL_BASE`/framework/modules/common/js/yuidomcollapse/yuidomcollapse-fancy.js"}
	{literal} 
        // backticks are necessary on the $smarty.const.URL_BASE
        // have to have at least one line between the {script}{/script} tags, else the plugin assumes it is empty.  even if it is commented out //
        //alert('We love Exponent!');
	{/literal}
{/script}

Pay attention to the comments between the "script" and "literal" tags.  You need at least 1 line between script tags, else Exponent will fly right by assuming it is empty.  Even if it is empty.  I suggest writing some comments in there so you remember, like you can see above.  Also, remember the smarty.const which is explained below.  The "config unique id" snippet is great if you have multiple instances of a particular view on your page.  This will cause Exponent to generate some random IDs for each of these and keep your scripts from interfering with one another.

Loading Help