Distinguishing design (or personality) is import for any competitive ecommerce website. This article provides technique, tips and tricks for utilizing StoreFront® Common Controls to easily apply your own custom design throughout your StoreFront® website.
Post your questions or comments about this article at this forum thread:
http://www.storefrontgoodies.com/cgi-bin/yabb/YaBB.cgi?board=look-feel;action=display;num=1086822340
The StoreFront® term “Common Controls” describes a collection of StoreFront® ASP.Net user controls that are included in (or referenced by) all or most of the web pages throughout your website. For example:
TopBanner.ascx
(The top banner displayed on every page)
TopSubBanner.ascx
(The top sub-banner displayed on every page)
LeftColumnNav.ascx
(The left column displayed on every page)
RightColumnNav.ascx
(The right column displayed on every page)
Footer.ascx
(The footer displayed on every page)
The Common Controls can be found in the following two locations:
root/CommonControls/
(Common Controls referenced via HTTP)
root/ssl/CommonControls/
(Common Controls referenced via HTTPS secure)
Let’s suppose you have a custom navigation bar that you want to include in the left column of every webpage, in place of the standard StoreFront® navigation menu.
One approach would be to set the StoreFront® design properties not to display the left column. Then you could add your custom code to every individual ASPX page throughout your website. Although this would work, it is very time consuming to implement and even worse when you need to apply updates in the future.
The better approach would be to plug your custom code into the LeftColumnNav.ascx file. By customizing this one file, your custom navigation bar will automatically propagate throughout your entire website, and at update time you only have to worry about updating one file.
You may have tried this approach already, only to be rewarded with an error page. The likely reason is that you deleted the standard StoreFront® menu control from within the LeftColumnNav.ascx file rather than hiding it.
If an ASP.Net or HTML element is identified with an ID="" statement (see example below), then 9 times out of 10 it is referenced in the underlying compiled code.
<uc1:cmenubar id="CMenubar1" CallPage="left" runat="server"></uc1:cmenubar>
The underlying compiled code references and therefore expects to find the above element, and if it has been deleted an error occurs. The trick is to hide the above control rather than delete it.
So how do you hide controls? The technique that PENDX developers use is to create a container to hold any element that we wish to hide. Then we hide the container by adding runat="server" visible="false" statements as follows:
<table id="Hide_SF_Elements" runat="server" visible="false">
<tr>
<td>
<uc1:cmenubar id="CMenubar1" CallPage="left" runat="server"></uc1:cmenubar>
</td>
</tr>
</table>
We then move any elements that need to be hidden into the table cell of the “hiding” table. When the underlying compiled code references the standard StoreFront® controls, there is no problem because they are still there. However they will not be present in the browser (as if they had been deleted).
For a real life example, look at the top banner of our site http://pendx.com. You will notice that we have completely replaced that standard StoreFront® controls with our own custom navigation menu. The format of our TopBanner.ascx file is as follows:
<%@ Control Language="vb" EnableViewState = False AutoEventWireup="false" Codebehind="TopBanner.ascx.vb" Inherits="StoreFront.StoreFront.TopBanner" TargetSchema="http://schemas.microsoft.com/intellisense/nav4-0" %>
<!-- Start Top Banner -->
PENDX custom navigation code is here…
<!-- End Top Banner -->
<table id="pendx_SFhide" runat="server" Visible="False">
<tr>
<td>
<!-- Original StoreFront® controls moved here -->
<asp:Label id="StoreName" runat="server" CssClass="TopBanner">StoreName</asp:Label>
<asp:Image id="StoreImage" runat="server" Visible="False"></asp:Image>
<!-- END Original StoreFront® controls -->
</td>
</tr>
</table>
The above technique is valid anytime you need to hide an element that is identified with an ID="" statement.
Let’s examine the difference between the root/CommonControls/ and root/ssl/CommonControls/ files.
In order for a webpage to be completely secure (with the locked icon in the browser status bar), everything referenced in the webpage must be from a secure (HTTPS) URL. For example, if a secure webpage references an image from a non-secure area (<img src="http://pendx.com/images/body/logo.jpg">), then the shopper will be presented with a warning message stating that not everything on the webpage is secure.
To resolve this you would change the image tag to reference the image from a secure URL as follows:
<img src="https://secure.pendx-corporation.com/storefront/images/body/logo.jpg">
This rule applies to any element that references something external to the page, such as JavaScript or Flash source files. That is why you are supplied with two separate groups of Common Control files. They can be identical with the exception that the root/ssl/CommonControls/ files need to be modified as necessary to eliminate any non-secure references.
StoreFront® provides a great framework for customization, and with the right know-how the sky’s the limit. The techniques described in this article will help you implement your custom design in an efficient and easily maintainable fashion. Look to storefrontgoodies.com for more helpful techniques and tricks to come…
Post your questions or comments about this article at this forum thread:
http://www.storefrontgoodies.com/cgi-bin/yabb/YaBB.cgi?board=look-feel;action=display;num=1086822340
Kurt West
Director E-Business Enablement
PENDX Corporation
http://www.pendx.com
