Digital Butter

Dynamic Right Column setup in MODx Revolution

We’re building out a large scale bilingual portal using MODx revolution (due to launch in 10 days), and because of the range of different content the site has, we’ve had to create a kind of ‘sub-templating’ strategy for our templates.

The idea is to keep the number of site templates in check - too many templates always leads to a maintenance nightmare - for us as the developers as well as the end user CMS admins.

In this particular site, we have a 3 column layout that goes as follows:

• Left sub-navigation
• Content area with resource specific content for an article, or if it is a folder, then a list of recently edited articles inside that folder.
• Right column with varying content, depending on the section of the site that you are viewing. For example, when viewing a page within the alcohol & spirits section of the site, the right column should feature a top 10 list of wines and a top 10 list of champagne. Those top 10 lists aren’t used in other sections of the site. In some scenarios, we may also want to override the content of the right column for one single page.

So we need to give CMS admins the ability to choose what sits inside the right column, and in what order it should be showing.

Internally we decided to name the right column blocks as ‘widgets’. We decided that we would be able to build everything we needed with only two templates - one for article folders, and one for articles themselves. Both templates have been assigned three template variables, where each one is intended to load a widget in the right column.

We’ve also created a category in the chunks tree that will contain all available site widgets. If we need new widgets later on, they will be inserted inside this category and will become available for selection for CMS admins.

^ How we’ve organized the elements tree.

We’ve previously used categories for organisational purposes only - but in this case there’s actual functional use (see @SELECT binding below). 

The three right widgets template variables have been setup as ‘single select dropdown lists’ where options are drawn dynamically from the right widgets chunks category using an @SELECT binding:

@SELECT name FROM modx_site_htmlsnippets WHERE category = 7

The default value of the TV has been set to @INHERIT, meaning that the choice of right column widgets will cascade down the resource tree, unless a CMS admin decides that they wish to override the configuration for any single resource.

So now that we have assigned those TVs to our two templates, here’s how it renders on the resource edit page:

Lastly, to actually render the widgets inside the right column, we have this block of code inside the template:

<div id=”ls-right-col”>   
    [[$[[*First]]]]
       
    [[$[[*Second]]]]
   
    [[$[[*Third]]]]
</div>

The MODx parser will evaluate each of those tags as follows (in the example that Top 10 Wines has been chosen):

1. [[$[[*First]]]]
2. [[$Top 10 Wines]]
3. Contents of the Top 10 Wines chunk, which can contain any content you like.

More to come on this new portal soon =)