×

Login

forgot your login?

Breakdown of lay_default.cfm

CFWebstore layouts are controlled by files called Color Palettes. The default Color Palette is layouts/lay_default.cfm. Most of your modifications will take place in template. I'll show you how to copy and create additional Color Palettes later on. 

Open layouts/lay_default.cfm in your FTP client or in download into your code editor. We'll break it down line-by-line.


{cfinclude template="put_layouthead.cfm"}

This CF tag 'includes' another template. It pulls code from another page and inserts it here. This is done for (a) readability of the code and (b) this chunk of code could be included on multiple pages. This is called code reuse and is important in all programming. 

The included file is located at layouts/put_layouthead.cfm and adds our doctype, meta tags, favicon, and some javascript that needs to be loaded before the BODY.

{!-- normalize all browsers --}
{link rel="stylesheet" href="css/foundation/normalize.css" /}
{!-- Foundation Base CSS, don't edit --}
{link rel="stylesheet" href="css/foundation/foundation.min.css" /}
{!-- fontawsome icons --}
{link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"}
{!-- custom CSS for your store, add all your code here --}
{link rel="stylesheet" href="css/default.css?v=660"}
{!-- colored menus - modify the default menus --}
{link rel="stylesheet" href="css/menu.css"}

Here we include the CSS files.

  • normalize.css - Resets all browse elements.
  • foundation.min.css - Foundation framework
  • default.css - All the customized css for this website.
  • font-awesome.min.css - This included the FontAwesome.io symbol font. 
  • menu.css - Several color options for the default menus.
{cfinclude template="put_body.cfm"}

Put_body.cfm allows you to add some basic CSS directly from the Color Palette form. It's recommended that you leave the Color Palette blank and make changes through the default.css file.

{div class="row container wrapper collapse defaults"}{!-- BEGIN WRAPPER --}

This is the wrapper for the body. Consult the default.css for the different classes. Everything but row is optional.

{!-- HEADER --}
{div class="row layout-header"}
{div class="medium-6 small-12 columns"}
{cfinclude template="put_sitelogo.cfm"}
{/div}
{div class="medium-6 columns hide-for-small text-right"}
{cfoutput}
{ul class="inline-list topnav"}
{cfif isdefined('Request.AppSettings.phone') AND len(Request.AppSettings.phone)}
{li}{a href="tel:#Request.AppSettings.phone#"}{strong}#Request.AppSettings.phone#{/strong}{/a}{/li}{/cfif}
{li}{a href="#request.self#?fuseaction=users.manager#request.token2#"}My Account{/a}{/li}
{li}{cfinclude template="put_topinfo.cfm"}{/li}
{/ul}
{/cfoutput}
{cfinclude template="put_searchbox.cfm"}
{/div}
{/div}
{!-- END HEADER --}

This is a mix of static and dynamic values.

  • Put_sitelogo.cfm pulls the logo image from Admin > Site Design > Main Settings.
  • Request.AppSettings.phone also comes from the Admin > Site Design > Main Settings.
  • Put_topinfo.cfm automatically add the quantity and value of the shopping basket.
{!-- MAIN NAVIGATION --}
{div class="row"}
{div class="small-12 columns"}
{cfinclude template="put_top_navigation.cfm"}
{/div}
{/div}
{!-- END MAIN NAVIGATION --}

Includes the main horizontal navigation bar.

{!-- BODY --}
{div class="row"}
{div class="small-12 columns" style="padding-bottom:20px"}
{!--- THIS IS WHERE ALL GENERATED PAGE CONTENT GOES ----}
{cfif fusebox.fuseaction neq "home"}
{cfinclude template="put_breadcrumb.cfm"}
{/cfif}
{cfinclude template="put_storecontent.cfm"}
{/div}
{/div}
{!-- END BODY --}

This is where the content gets loaded into the template. You can delete everything on the page except put_storecontent.cfm. 

{!-- FOOTER --}
{footer class="row"}
{div class="small-12 columns text-center"}
{cfinclude template="put_bottommenus.cfm"}
{cfinclude template="put_copyright.cfm"}
{cfinclude template="put_trackingcode.cfm"}
{br /}{br /}
{/div}
{/footer}
{!-- END FOOTER --}

Include common footer functions.

  • put_bottommenus.cfm - Adds Category and Page links.
  • put_copyright.cfm - Adds the site copyright which includes the current year.
  • put_trackingcode.cfm - If you add your Google Analytics account number
{!--- JAVASCRIPT ---}
{!-- include jquery :: version 2 does not support IE8 --}
{script src="//code.jquery.com/jquery-1.10.1.min.js"}{/script}
{script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"}{/script}
{!-- load foundation scripts --}
{script src="js/foundation.min.js"}{/script}
{script}
$(document).foundation();
{/script}

The included javascript includes:

  • jquery-1.10.1.min.js - We don't use jquery 2+ because it doesn't support IE8. IE8 use is shrinking rapidly so we can use the latest jquery in a few years. This is called from the CDN because it's faster than storing locally. 
  • foundation.min.js - This calls the Foundation js functions like menus, accordians, etc. 

You can see that everything fits within the Foundation grid. You can move or delete anything on the page except put_storecontent.cfm and the site will run just fine.