Replacement CartList Control for StoreFront 6
by Structured Solutions

This is a drop-in replacement for the CartList control that ships with StoreFront 6.0. This control displays a list of items in the cart in a format similar to a register tape. It can be used anywhere the standard CartList can be used.

Features

• Compact "Register tape" list of items linked to Product pages
• Personalized Header
  • Any text or image is linked to the Checkout page
  • Include any Customer field in the text for a personalized header when the customer is signed in
• Customizable Toolbar
  • Any text or image is linked to the Shopping Cart page to create a View Cart button
  • Any text or image is linked to a Javascript Expand and Shrink function that will alternately show and hide the items in the cart
  • Include any Cart field in the summary text displayed when items are hidden
• Customizable Footer
  • Include any Cart field in the total line
• Each section can be turned off individually if you want to integrate this cart with your own control
• Every option is available using standard HTML syntax, no ASP.NET programming required
• Tested with IE 6.0, Netscape 7.0, Opera 7.0, and Mozilla 1.3
• Tested with StoreFront 6.0 and 6.1
• Javascript and cookies must be enabled for the shrink/expand function to work properly (Javascript and cookies are also required for StoreFront to work correctly)

Tables of Contents

• Installation Instructions
• Control Documentation
• Examples
• Removal Instructions
• Support

Installation Instructions

The Replacement CartList Control is a drop-in replacement for the CartList control that ships with StoreFront 6.0. This means that it completely replaces the standard CartList control. Follow these steps to install the Replacement CartList Control:

1. Make a backup copy^† of CartList.ascx and CartList.ascx.vb located in the Controls directory of your store.
2. Copy SSCartList.dll from the bin directory where you unzipped the distribution package, to the bin directory of your store and to your secure bin directory if you have one.
3. Copy SSCartlist.js to the root and ssl directories of your store. 
4. Copy CartList.ascx and CartList.ascx.vb from the unzipped Controls directory to the Controls directory of your store.
5. Copy CartList.ascx to the ssl/Controls directory of your store.
6. Compile your store using "Compile Components" on the StoreFront Client Menu in FrontPage or DreamWeaver; or by loading the CompileSite.aspx page of your store (i.e. open your browser and load the page http://yoursite/CompileSite.aspx).
7. Optional: Copy the sample images from the unzipped images directory to the images and ssl/images directories of your store. These are the same images seen in Examples 3-6 below.

Back to top

Control Documentation

After installation, the replacement CartList control will work without any other changes to your pages. See Example 1 below to see how the control looks by default. You can completely customize the look and feel of the replacement CartList with just a few simple additions to the CartList tag. The replacement CartList control is designed to make customization very easy by eliminating the need to edit complex ASP.NET controls or change the "codebehind" programming. 

The table below lists all of the replacement CartList attributes that can be added to the CartList tag. Multiple attributes can be used just like with regular HTML tags. Moreover, you do not need to recompile your store to see your changes. Just save your page or control file (aspx or ascx) and reload the page in your browser. This makes experimenting very easy. Several examples are shown in the next section.

Replacement CartList Control Attributes

Cart Fields

These Cart fields can be referenced in the FooterText, SingleItemText and MultipleItemsText attributes. To reference a field, enclose it in square brackets "[ ]". For example, "Subtotal: [SubTotal]". Most of these fields will not have useful information until you start checking out. Similarly, it would not make sense to use a Text field in the FooterText since it will be formatted as currency.

Customer Fields

These Customer fields can be referenced in the HeaderSignedInText attributes to provide a personalized message to customers when they are signed on. For example, if you specify HeaderSignedInText="[CustFirstName]'s Cart" and Joe Arbogast is signed in, then the Header text will read "Joe's Cart".

Editing the Replacement CartList Control

Although you can change a great deal of the look and feel of CartList control using tag attributes, you may find that you want to change more. In that case, you will need to edit the CartList control source (CartList.ascx). These tips and guidelines are meant to help you change the control without breaking it:

• Do not delete any tag from CartList.ascx that has an "ID" (e.g. <asp:Label id="test"...>).
• There are 4 sections to the control: Header, Toolbar, Body, and Footer. Each section has a corresponding <asp:TableRow>, such as <asp:TableRow id="HeaderRow"...> for the Header. To hide a section, you can use the appropriate ShowXXX attribute described above, or add the attribute/value Visible="False" to the corresponding table row. For example, to hide the header you can either specify <uc1:CartList ShowHeader="False"> where you use the CartList control, or change CartList.ascx so to read <asp:TableRow id="HeaderRow" Visible="False">.
• If you enter header or footer text in CartList.ascx, it will take precedence over text you enter on HeaderSignedInText, HeaderSignedOutText, or FooterText.. That is, you will see the text you entered in the control source. You will not see the conflicting text you entered in the tag.
• If you enter a value for CssClass for an element in the control source, it will take precedence over the CSS class that you specify on the tag or inherit from the surrounding control.
• Most odd display differences between browsers can be traced to putting a class parameter onto the wrong element in the control. It is probably safer to specify the CssClass on the CartList tag and let the program logic take care of propagating it correctly.
• Do not change an element type in the control source (i.e. from a table cell to a label). If you want to integrate your own element to replace the one that is there, you should hide the entire section and then create your own version of that section.

Back to top

Examples

All of the following examples were taken from a standard StoreFront 6.1 installation using the default "Coffee" design scheme. The CartList control was inserted below the Simple Search control in the default RightColumnNav.ascx file using the tag shown. Any changes to the CartList html are shown in the CartList.ascx column. Each one builds on the previous. Changes from one to the next are highlighted in bold.

Sample Display	CartList Tag (in RightColumnNav.ascx)	CartList Source Changes (in CartList.ascx)
Example 1: This example shows the default appearance of the Replacement CartList Control. This is what you will see after you install CartList if you make no other changes.
	<uc1:CartList id="CartList1" runat="server"></uc1:CartList>	No changes
Example 2: Custom styles are used to center the header and make the text bold, and align the footer to the right. Notice that the customer has signed in, so their first name now appears in the header.
	<uc1:CartList id="CartList1" runat="server" HeaderStyle="text-align:center; font-weight:bold" FooterStyle="text-align:right"></uc1:CartList>	No changes
Example 3: Convert the header and toolbar to use graphic images. The sample images are 50 and 100 pixels wide so the cart width is set to match and centered in the column.
	<center> <uc1:CartList id="CartList1" runat="server" HeaderStyle="text-align:center; font-weight:bold" FooterStyle="text-align:right" HeaderImage="images/cartcheck.gif" ViewCartImage="images/viewcart.gif" ExpandImage="images/expand.gif" ShrinkImage="images/shrink.gif" Width="100"></uc1:CartList> </center>	No changes
Example 4: Same as above but the items are hidden because the Shrink button was pressed.
	No changes	No changes
Example 5: Now the summary line is hidden and the line color is changed to match the button borders.
	<center> <uc1:CartList id="CartList1" runat="server" HeaderStyle="text-align:center; font-weight:bold" FooterStyle="text-align:right" HeaderImage="images/cartcheck.gif" ViewCartImage="images/viewcart.gif" ExpandImage="images/expand.gif" ShrinkImage="images/shrink.gif" Width="110" LineColor="#929081" ShowSummary="False"></uc1:CartList> </center>	No changes
Example 6: This last example shows that you can also make changes to the source template for the control. In this case, the footer is changed to bold white.
	No changes	<asp:TableCell id="FooterCell" Runat="server" wrap="False" Width="100%" Font-Bold="True" ForeColor="#ffffff"></asp:TableCell>

Back to top

Removal Instructions

To remove the Replacement CartList Control from your store, you will need to restore CartList.ascx and CartList.ascx.vb. If you made backup copies of these files prior to installation, then use them in the restore steps below. Otherwise, use the original versions from the StoreFront installation directory (e.g. "C:\Program Files\StoreFront 6.0\Web\Controls").

1. Copy the backup or original CartList.ascx and CartList.ascx.vb files to the Controls directory of your store.
2. Copy the backup or original CartList.ascx file to the ssl/Controls directory of your store.
3. Remove SSCartList.dll from the bin directory of your store.
4. Remove SSCartList.dll from the secure bin directory of your store if you have one.
5. Remove SSCartlist.js from the root and ssl directories of your store.
6. Compile your site using "Compile Components" on the StoreFront Client Menu in FrontPage or DreamWeaver; or by loading the CompileSite.aspx page of your store (i.e. open your browser and load the page http://yoursite/CompileSite.aspx).

Back to top

Support

Direct email support is available from support@sfaddons.com for all licensed users of the Replacement CartList Control. You also may find answers to questions on the StoreFront newsgroup.

Back to top