Announcement:Materials and articles for ProductCart 5 can be found at our brand new support center.

Create an account to edit articles | See Formatting Syntax for Wiki syntax | We look forward to your contribution!

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

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

Styling the cart summary

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.

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

  • Add the following just below it:

    IF pcStrPageName <> "viewcart.asp" THEN

  • Locate the closing ASP code tag at the very bottom of the page:

    %>

  • Add the following just above it:

    END IF

  • 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.


QR Code
QR Code Show a small shopping cart summary in your store design (generated for current page)