====== Show a small shopping cart summary in your store design ======

===== Overview =====

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):

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

===== Styling the cart summary =====

By default the shopping cart summary is contained in a DIV called "**pcShowCart**".

<code><div id="pcShowCart"></code>

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//).

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

If your store uses a [[:productcart:storefront-integrate|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.

===== Hiding the small shopping cart on the View Cart page =====

If you want to hide the small shopping cart on the "View Shopping Cart" page (viewCart.asp), you can do so with a simple code change to the file //smallShoppingCart.asp//, which is located in the //pc// folder. NOTE: the following only works if //smallShoppingCart.asp// is included in //footer.asp//, not if it's included in //header.asp// (due to the fact that the //pcStrPageName// is empty when //header.asp// is first loaded).

  * Download the file using your favorite FTP software and make a back-up copy of it
  * Open it with notepad or your favorite HTML editor
  * Locate the opening ASP code tag at the very top of the page: <code><%</code>
  * Add the following just __below__ it: <code>IF pcStrPageName <> "viewcart.asp" THEN</code>
  * Locate the closing ASP code tag at the very bottom of the page: <code>%></code>
  * Add the following just __above__ it: <code>END IF</code>
  * Save the file and re-upload it to the storefront
  * This conditional statement makes ProductCart completely ignore the code located inside the statement if the page is the "View Shopping Cart" page, which means that the small shopping cart will be hidden on that page.