Products

Products
Viewing By Entry / Main
June 1, 2008

Dynamic column layouts in Coldbox

Posted At : 10:37 AM | Posted By : clint317
Related Categories: Coldbox 2.6
Possibly like me, you have a site that can be thought of as sections. An example would be an ecommerce site with product categories such as electronics, garden, books, movies, and others. The idea behind dynamic columns in Coldbox is that for each section I just mentioned, you may want to display content in the left column of your site specific for that section only and an element or two common to all of them.

There may very well be several ways to accomplish this small task and I'm going to show you one of mine. So lets just jump right in. If you're like me, your just skimming though this any ways and so I'll just make a list type explaination.

  • This example uses one layout file for multiple sections of the site where each section will have a different left column layout.
  • Each section will have it's own left column display file.
  • Each column file will render boxes within it ordered as needed.

    • So your views directory would look something like:
    -views
       -boxes
         menu.cfm
         tvSuppliers.cfm
         gardenTips.cfm
         weather.cfm
         information.cfm
       -elements
         header.cfm
         footer.cfm
         leftColumn_Electronics.cfm
         leftColumn_Garden.cfm
       -electronics
         home.cfm
       -gardens
         home.cfm

    And here's how the layout template uses these elements:

    <body>
    <cfoutput>
    <div id="pageContent">
       <div id="bannerContent">
          #renderView('elements/header')#
       </div>
       <div id="bodyContent">
          <div id="leftContent">
             <cfswitch expression="#rc.section#">
                <cfcase value="electronics">
                   #renderView('elements/leftColumn_Electronics')#
                </cfcase>
                <cfcase value="garden">
                   #renderView('elements/leftColumn_Garden')#
                </cfcase>
                <cfdefaultcase>
                   #renderView('elements/leftColumn')#
                </cfdefaultcase>
             </cfswitch>
          </div>
          <div id="centerContent">
             #renderView()#
          </div>
       </div>
    </div>
    <div id="footContent">
       #renderView('elements/footer')#
    </div>
    </cfoutput>
    </body>

    And in the elements, you place the boxes you want, order and whatever layout.
    leftColumn_garden.cfm for example:

    <cfoutput>
       #renderView('/boxes/menu')#
       #renderView('/boxes/gardenTips')#
       #renderView('/boxes/information')#
    </cfoutput>

    And of course the handler. I usually place the layout variables in here as such:

    <!--- Display --->
    <cfset Event.setValue('pageTitle',"MyWebsite Name - Gardens")>
    <cfset Event.setValue('section',"garden")>
    <cfset Event.setView("gardens/home")>

    That's it and about as simple a plan as I could come with in my limited Coldbox knowledge. I'm sure it can be automated somewhat a little more or better simplified. Frankly I couldn't find any info online myself to show such an example but your more than welcomed to one up on me. Hope this helps.

    Comments (0) | Print | del.icio.us | Linking Blogs

    Comments

    There are no comments for this entry.


    Copyright © 2005-2006 Clint Willard. All rights reserved.
    Aura skin for Clint Willard's BlogCFC inspired by Brooks Bilson's Bolg.
    All trademarks property of their owners.