Custom Layouts

Custom Layouts

Changing the color palette for a page is a nice way to add some variety to your site. But sometimes you might want completely different layouts for the sections of your site. Custom layouts allow you to do this. You will probably want to make changes to the default layout as well to give your store a unique look.

Your layouts are stored in the layouts directory of the store. The default layout is lay_default.cfm. You should use the ‘lay_’ prefix for all your layouts to make it easier to find them. If you look at the lay_default.cfm page, you’ll notice a fair amount of ColdFusion code in there, not just HTML. The various put_.cfm pages contain different bits of code that you can include into your layouts to do different tasks. The cfinclude for put_layouthead.cfm for instance, should be included on all of your layout pages to create the header of the page which includes various scripts and functions needed for the store pages to work properly. Other files are included for things like persistent login box, store menus, storewide discounts, shopping cart summary, footers, etc. All these items are optional and may be included or not in your layout. There is also a link for the style sheet and the code that outputs the body tag using your color palette settings.

The most important part of the layout is the line that outputs the content generated by CFWebstore:

            <cfoutput>#fusebox.layout#</cfoutput>

This line should appear in the middle of your design between your header and footer, where you want the content of your site to appear.

You can include the other files wherever you wish or leave them out altogether. Feel free to modify the code in the individual pages as well as needed, move them around and configure them in whatever way you wish. You shouldn’t let the current design constrain you, be creative and see what you can come up with! Here is a list of the various layout components you can use in your layouts:

1. put_layouthead.cfm – This page outputs all the code needed in the ‘head’ section of the HTML page, including the dynamic page title, meta tags, javascripts and functions, etc. You shouldn’t need to edit this page, but be sure to include it at the top of any of your custom layouts.
2. put_meta.cfm – This page is included inside put_layouthead.cfm and outputs meta tags and headers for your store. You usually won’t need to edit this, but feel free to add any additional tags you want or modify if needed.
3. put_body.cfm – Generates a body tag using the color settings for your palette. Feel free to hard-code your body tag if you prefer.
4. put_sitelogo.cfm – If you added a site logo in the Main Settings, this page will output it to the page, otherwise it will output the Site Name.
5. put_topinfo.cfm – This template will output two pieces of information to the page, the storewide discounts (if any) and a summary of the shopping carts (number of items and subtotal). These are each called by a component, if you prefer you can call them individually in your layout page. Generally you would adjust the look of these items using styles, but more advanced users can edit the component if they prefer.
6. put_breadcrumb.cfm – The breadcrumb trail provides the user with links at the top of the page showing their path through the site, and allowing easy access to return to previous pages. The menu_trail class can be used to adjust the style.
7. put_sidemenus.cfm – This page is used for creating the category and page menus for the store (typically found on the left side of the page). Note that the sidemenus are optional, if you prefer you can just use your own hard-coded set of menus. See the Customizing Store Menus section of the Programming Guide for more information on creating menus.
8. do_dhtml_menus.cfm – Alternative method of doing menus, this creates CSS-based DHTML menus. Uses the built-in functions to extract categories and pages into a nested list and styled with a variety of css style sheets. See the Customizing Store Menus section of the Programming Guide for more information on creating menus.
9. put_adminlinks.cfm – Outputs links for the user to access the admin menu. An ‘admin’ link will be shown for any user with the Admin Menu permission and an ‘Order Fulfillment’ link will be shown for a user that has access to the Order Management section.
10. put_searchbox.cfm – Places a persistent search box on your layout. This allows your users to search for products or pages without having to first go to a dedicated search page.
11.  put_loginbox.cfm – Places a persistent login box on the page. This gives the user access to login or logout from anywhere on the site, as well as access their account page. This will call the users.loginbox fuseaction to create the boxes according to the user’s current login status. If you need to modify the style and/or images used for the box, these are done by the dsp_login_box.cfm and dsp_logout_box.cfm files in the uses/login directory.
12.  put_bottommenus.cfm – This page will output horizontal menus for the categories and pages at the bottom of the page. Like the sidemenus page, it will by default save the menu text to a session variable for performance purposes. You can modify this page to use only one type of menu, change the settings of the menu, etc.
13.  put_copyright.cfm – This page can be used to output a copyright footer to your site. It includes the name of the site, with a mailto link for emailing the merchant. The email address will be encoded to prevent spam harvesting.
14.  put_debug.cfm – The last optional page you can use is the admin debug page. This uses a ColdFusion custom tag to output some optional debug information to the page. This can be useful when running the site from a remote server that does not have normal debug information available. To view the debug, add “Debug=Yes” to the URL string (preceded by a ? or & as appropriate). You will need to be logged in under the admin account to use this option.

One thing to be aware of when doing your layout is support for shared SSL. We highly recommend purchasing your own custom SSL certificate, but if you decide to try using a shared SSL provided by your host, you need to make sure to pass session variables on the URLs to prevent losing the session. The store creates a set of variables you should use, Request.Token1 and Request.Token2. These variables are used to add the CF session variables to store URLs especially going from a non-secure to secure link and vice versa. The first should be used if there are no other variables on the URL (such as index.cfm), and the second is used if there are already variables on the URL (such as index.cfm?fuseaction=basket.display). Take a look at the sample layout to see examples of how to use these variables, and be sure to have all links with these variables inside cfoutputs or they won’t work!

Once you have your layout created, you can use it as the default for your site by naming it lay_default.cfm (you might want to save a backup of the one that comes with the store as a reference!) Or you can save it under another name and change the default palette setting to use your new layout (this is a good way to prevent overwriting your layout when updating the store). You may want to change the default layout near the end of the fbx_Layouts.cfm page as well. You can also create new layouts to use for different sections of your store. Create a new color palette (or make a copy from the one you want to use) and enter the filename for the new layout in the settings for the palette. Select this color palette for the pages you wish to apply it to.

The store also contains an alternate layout example (lay_alt.cfm) and a layout used for printable pages with no navigation or other page elements (lay_blank.cfm). Feel free to customize and use these layouts as well.

The admin layout and all associated components are found the layouts/admin directory and generally shouldn’t be modified other than by advanced webstore developers. However, if you often view the admin from a browser/monitor with limited space you may prefer to remove the admin banner at the top, this can be done in the main frameset in lay_admin.cfm. If you want to play with the colors of the sidemenu, that can be found in lay_adminmenu.cfm and in the rico.js file (around line 179).