Managing CSS and Javascript/JQuery in MODx templates and pages – Part One

An interesting bit of discussion on Twitter today about jQuery rotating image galleries for MODx got me thinking about the way I’ve designed my templates to handle custom jQuery at the per-page level.  Long-time readers from back-in-the-day (by which I mean February) will recall that this was one of my high-priority issues for using MODx Revolution.  While I don’t quite have it all sorted out yet, I think I’m on the right track.

My goal with jQuery (and also CSS) is to provide customization opportunities at both the template level and at the individual page level.  For me this ties in with my overall template strategy, namely that all my templates will use the same chunk structure (with the variation coming via different properties passed to the chunk, and also via template variables).

Lets dive right in and take a look at my chunk “scriptsBlock”, which handles ALL of the javascript/jquery for EVERY template on my MODx installation:

<!–start scripts_block –>
<script src=”/assets/js/jquery-1.3.2.min.js” type=”text/javascript” charset=”utf-8″></script>
<script src=”/assets/js/jquery.hoverIntent.minified.js” type=”text/javascript” charset=”utf-8″></script>
<script src=”/assets/js/corners_modified.js” type=”text/javascript” charset=”utf-8″></script>

[[$[[+customScriptsChunk]]]]
[[javascript_includes]]
[[customJQuery]]

<!–end scripts_block –>

The three <script> tags at the top are the “core” javascript that is integral to our overall web design. I think this translates to what Greg Smart refers to as being part of the “structural HTML“.  Every template in my system will include those three script calls.

Now lets get in to the next part of the chunk – the MODx tags.  The first one looks like this:

[[$[[+customScriptsChunk]]]]

This nested tag syntax may not be immediately recognizable to many of you, so lets walk through it.  Starting with the inner tag:

[[+customScriptsChunk]]

That syntax ([[+) is a “placeholder” tag in MODx.  It represents a value that will be swapped in upon being specified elsewhere. In this case, being that it is inside the chunk “scriptsBlock”, it can be specified in the call to “scriptsBlock”.

[[$scriptsBlock]]  // call to “scriptsBlock” chunk with regular syntax

[[$scriptsBlock? &customScriptsChunk=`myJavascriptChunk`]]  // call to “scriptsBlock” chunk with a property passed.

When a chunk is passed a property which corresponds with a [[+placeholder]] tag in the chunk, the passed value is simply substituted in.  Thus [[+customScriptsChunk]] becomes ‘myJavascriptChunk‘.  Thus

[[$[[+customScriptsChunk]]]]

becomes

[[$myJavascriptChunk]]

… a simple chunk call, referring to a chunk that presumably holds some additional javascript.

If no matching property was passed in the chunk call, the placeholder simply disappears during parsing.

Are you starting to see how this works?  Lets say I need to create a new template to be used on pages with lots of tables in them (data tables! full of tabular data! not the other evil kind!).  I want to be able to use the jQuery tablesorter so that users are able to sort these tables by column. I’ll create a chunk called “tablesorter” that simply calls that script:

<script src=”/assets/js/jquery.tablesorter.js” type=”text/javascript” charset=”utf-8″></script>

Then in my new template, I simply refer to ‘tablesorter’ when calling [[$scriptsBlock]] in my template.

[[$scriptsBlock? &customScriptsChunk=`tablesorter`]]

All pages that use this template will get the “core” script calls AND the tablesorter script call:

<!–start scripts_block –>
<script src=”/assets/js/jquery-1.3.2.min.js” type=”text/javascript” charset=”utf-8″></script>
<script src=”/assets/js/jquery.hoverIntent.minified.js” type=”text/javascript” charset=”utf-8″></script>
<script src=”/assets/js/corners_modified.js” type=”text/javascript” charset=”utf-8″></script>

<script src=”/assets/js/jquery.tablesorter.js” type=”text/javascript” charset=”utf-8″></script>
[[javascript_includes]]
[[customJQuery]]

<!–end scripts_block –>

In this way I create individual templates (or groups of templates) that inherit all of the core script calls and add some more of their own.

The final two MODx tags

[[javascript_includes]]
[[customJQuery]]

…are for adding additional javascript and/or jQuery at the per-page level, using snippets and template variables. I’ll save those for another post.

Advertisements

8 responses to this post.

  1. […] Managing CSS and Javascript/JQuery in MODx templates and pages – Part One « The CMS less… […]

    Reply

  2. […] here: Managing CSS and Javascript/JQuery in MODx templates and pages … If you enjoyed this article please consider sharing […]

    Reply

  3. […] more: Managing CSS and Javascript/JQuery in MODx templates and pages … Share and […]

    Reply

  4. thanks for admin wonderfull information…

    Reply

  5. Thanks, dude…nice way to include js at the template level.

    Reply

  6. Posted by budi on February 11, 2011 at 10:55 am

    mana CSS-nya?

    Reply

  7. Thanks for sharing that with us, james! I was struggling to get a decent template hierarchy done. Now I seem to have the solution! 😀

    Reply

  8. this is very good tutriol

    Reply

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

%d bloggers like this: