Show a small shopping cart summary in your store design

Your customers will appreciate having a quick summary of what they have added to their shopping cart shown on every storefront page, so that they know at all times what the total of their order is at that time.

This useful code snippet shows how many items have been added to the cart, the current order total, a link to view the shopping cart details, and one to start the checkout process.

You can add this dynamic interface element to your store interface by including the following line of code (you will find it in the default footer.asp file):

<!--#include file="SmallShoppingCart.asp"-->

By default the shopping cart summary is contained in a DIV called “pcShowCart”.

<div id="pcShowCart">

So you can easily style the information that is shown by having a style definition called pcShowCart in one of the CSS documents loaded by pc/header.asp.

For example, ProductCart version 3.11 contains the following style definition in the CSS document called “pcHeaderFooter.css”, which is used to style the default graphical interface used by the shopping cart (default version of header.asp and footer.asp).

#pcShowCart {
 background-color: #FFFFAA;
 color: #666666;
 padding: 5px 5px 5px 10px;
 margin-bottom: 5px;
}

If your store uses a customized graphical interface (very common), you will probably not use pcHeaderFooter.css. You can then copy this style and paste it into any of the other CSS documents loaded by your customized version of header.asp (e.g. pcStorefront.css). Edit the style definition as you wish to change the look of the small shopping cart summary.