Customizing common Display Logic

The Web Store is somewhat customizable just through the Admin interface and the stylesheet, but there are a handful of things that you definitely will want to change by editing the ASP.Net interface.

First make sure you understand the Overall Template Design of the Web Store. Now you're ready to make some changes to the interface.

The most common UI changes are performed in these documents:

  • Default.aspx
    This is the home page for the store and this page is left intentionally for your customization. Generally this page should have a short welcome message followed by a list of top or new products in your store that you want customers to be aware of and click on. By default this page is completely static, but of course you can automate it if you choose. For example, you can use the SpecialsListing.ascx control to display specials that you have set up in your Items Inventory data. This page is really left up to you because it represents your first impression to the customer.

  • PageHeader.ascx
    The page header contains the top of the Web page and contains the top logo and the menu band just below the logo. This header is completely up to you and can be customized as you see fit. I like to use a company logo/id for the store and then also include links back to the main Web site here to fit into the site that it belongs to for site identity. But the menu bar is completely optional.

    The pageheader is pretty much made up of completely static text (with the exception of the name of the store which is embedded with <%= Westwind.WebStore.App.Configuration.StoreName %>. The control is stored in the output cache.

  • PageFooter.ascx
    The page footer is placed into the 'content' frame. The default footer doesn't do much - it displays a line and embeds a copyright for your company. But you probably will want to add a company logo, plus possibly some support links or other information that displays on each page.

    This control too is made up pretty much of static text except for the date that is inserted. Like the header it is completely cached in the ASP.Net output cache.

  • CategoryList.ascx
    This is the sidebar on the left of the Page which contains a set of static links as well the list of categories. The category list is generated dynamically from the database and inserted into the document, while the links at the top of this box are completely static. If you decide to not use a menu bar in the header you may add additional links to the top of the list to point back to your main site or other direct links into the store.

    Note that background behind the boxes is determined by the main page layout and the CategoryListBackground CSS style rather than by the HTML in the CategoryList.ascx file. This is because the ASCX control only renders the tables contained inside of the <td> tag that the the control is hosted in.

    Of the template controls provided this is probably the most complex, partially because it is made up of some generated code and partially because VS.Net does a really shitty job of representing the display of this control in the editor. This control should not be cached in its default configuration because it has some dynamic data on it to display the shopping cart contents.

    The category list is generated via code which goes out to the database and retrieves the list of categories. The list is internally cached so database access for it is only performed once. After that the generated list HTML resides in the ASP.Net cache and is retrieved from there.


Access to Configuration Settings

Notice that some of the controls access variables that you provided during the configuration of the store - such as the name of the store and your company. This information comes from a 'global' configuration object which is accessible from anywhere via
App.Configuration. This class contains a host of properties that are loaded from web.config at application startup and are always available. This class also corresponds closely to the settings that you enter on the Administration Page's Configuration Form.

Changing the look of the store

As an excercise let's change the look of the store by customizing the homepage, adding a custom header and adding a link to the category list.



© West Wind Technologies, 1996-2018 • Updated: 12/28/03
Comment or report problem with topic